vuex 使用详解

1.下载安装 vuex

npm install vuex --save

2.创建并初始化 store

新建 store 文件夹
在 store 文件夹下，新建 index.js
/store/index.js

import Vue from "vue"; 
import Vuex from 'vuex';    // 引入vuex 
Vue.use(Vuex)               // 使用vuex 
const store=new Vuex.Store({    // 初始化数据仓库store     
state:{
        name:'张三',         
        number:0,         
        list:[            
          {id:1,name:'111'},             
          {id:2,name:'222'},             
          {id:3,name:'333'},
        ]     
} }) 
export default store;   // 默认导出数据仓库store

main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import 'lib-flexible/flexible'
import store from './store' // 引入数据仓库
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store, // 将数据仓库store对象添加在vue实例上，可以在外部使用this.$store.state.xxx 访问数据仓库中的数据
  components: { App },
  template: '<App/>',
})

3.读取 store 数据

使用 this.$store.state.name 读取

/pages/home.vue

  mounted() {
    console.log(this.$store);
    console.log(this.$store.state);
    console.log(this.$store.state.name);	// 访问store中的数据
  },
console.log(this.$store);

console.log(this.$store.state);

console.log(this.$store.state.name);

利用 计算属性 computed 读取 store 数据 3

优雅的获取仓库数据，使用计算属性获取

   // 优雅的获取仓库数据
 mounted() {
   console.log(this.getName);	// 访问计算属性中的store数据
 },
 computed:{
   getName(){
     return this.$store.state.name;	// 获取store中的数据
   }
 }

利用 vuex 的 mapState 方法获取 store 数据

使用 mapState 方法获取 store 中的数据

import { mapState } from "vuex";
  mounted() {
    console.log(this.name);
  },
  computed: {
    ...mapState(["name"]),		// 解构赋值，将store数据加入计算属性中
  },

  ...mapState(["name"]),
  等价于
  name(){
      return this.$store.state.name;
    }

给取到的数据取名为 getName

 ...mapState({ getName: "name" }),
 等价于
 getName(){
      return this.$store.state.name;
    }

4.修饰器 getter，处理 store 数据

getter 定义

为了方便统一处理 store 中的数据，使用 getter 属性，在源头一次性处理取到的数据

const store = new Vuex.Store({
  // 初始化数据仓库
  state: {
    name: '张三',
    number: 0,
    list: [
      { id: 1, name: '111' },
      { id: 2, name: '222' },
      { id: 3, name: '333' },
    ],
  },
  getters: {
    // getters属性中的方法 返回就是后的store数据
    getMessage(state) {
      return `hello ${state.name}`
    },
  },
})

获取 getter 修饰后的 store 数据

this.$store.getters.xxx 修饰数据

console.log(this.$store.getters.getMessage);	// hello 张三
使用mapGetters获取修饰后的store数据
import { mapGetters, mapState } from "vuex";
  mounted() {
    console.log(this.getMessage);
  },
  computed: {
    ...mapGetters(["getMessage"]),
  },
给取到的数据取名为getName
import { mapGetters, mapState } from "vuex";
  mounted() {
    console.log(this.getName);
  },
  computed: {
    ...mapGetters({getName:'getMessage'}),
  },

修改 store 数据

vuex 中使用 mutation 修改 store 数据

const store = new Vuex.Store({
  // 初始化数据仓库
  state: {
    //state属性定义数据，this.$store.state.name / ...mapState()获取数据
    name: '张三',
    number: 0,
    list: [
      { id: 1, name: '111' },
      { id: 2, name: '222' },
      { id: 3, name: '333' },
    ],
  },
  getters: {
    //getters属性修饰数据，this.$store.getters.getMessage / ...mapgetMessage()获取修饰后的数据
    getMessage(state) {
      return `hello ${state.name}`
    },
  },
  mutations: {
    //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
    setNumber(state, number) {
      state.number = number
    },
  },
})

触发 mutation 中的 setNumber 方法，改变 store 中的 number

this.$store.commit('setNumber', 9)
this.$store.commit触发改变

官方建议 mutation 中的方法，第二个参数在传递实参时，最好传递一个对象进去，且形参命名为 payload

    mutations:{     //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
        setNumber(state){	// 不传递参数
            state.number++;
        },
        setNumber1(state,number){	// 参数为基本数据类型
            state.number=number;
        },
        setNumber2(state,payload){	// 推荐：参数为对象
            state.number=payload.number;
        }
    }

触发 mutation 改变数据

this.$store.commit('setNumber')
this.$store.commit('setNumber1', 9)
this.$store.commit('setNumber2', { number: 6 })

mapMutations 函数 映射 mutation 方法

mapMutations 函数,将 store 中的 mutation 函数 映射为当前组件的 methods 方法，调用方法触发改变
定义改变共享数据的的 mutation 函数

    mutations:{     //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
        setNumber1(state,payload){		// 传递一个对象作为参数
            return state.number=payload.number;
        },
        setNumber2(state){		// state是默认参数，在调用是不需要传递
            return state.number++;
        }
    }

将 mutation 函数映射到组建的 methods 中

import { mapActions, mapGetters, mapMutations, mapState } from "vuex";

methods: {
    ...mapMutations(["setNumber2", "setNumber1"]),
    }

调用方法，改变共享数据

this.setNumber2() // 不传参
this.setNumber1({ number: 6 }) // 传参

异步更新 store 数据

action 用于处理异步任务
想要异步更改共享数据，直接在异步回调中触发 mutation 是不奏效的
需要借助 action 函数
1，通过 dispatch 触发 action 函数中的异步任务
2，异步任务的成功回调 中书写 this.$store.commit 触发 mutation 函数
3，action 函数中的异步任务完成后，通过 commit 触发 mutation 函数 实现共享数据更改
dispatch 触发 action 函数中的异步任务

定义 mutations 和 actions

    mutations:{     //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
        setNumber(state,number){
            return state.number=number;
        },
        setNumber1(state,payload){
            return state.number=payload.number;
        },
        setNumber2(state){
            return state.number++;
        }
    },
    actions:{
        doasync(context){
            setTimeout(()=>{
                context.commit('setNumber2')	// 异步触发 共享数据更改
            },2000)
        }
    }

dispatch 触发异步任务

this.$store.dispatch('doasync')

dispatch 触发异步任务，传递参数

    mutations:{     //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
        setNumber(state,number){
            return state.number=number;
        },
        setNumber1(state,payload){
            return state.number=payload.number;
        },
        setNumber2(state){
            return state.number++;
        }
    },
    actions:{
        doasync(context){
            setTimeout(()=>{
                context.commit('setNumber2')
            },2000)
        },
        doasync1(context,step){
            setTimeout(()=>{
                context.commit('setNumber1',step)
            },2000)
        }
    }

this.$store.dispatch("doasync1", { number: 6 })

mapActions 函数映射 action 方法

mapActions 函数，将 action 函数映射到组件的 methods 中，直接调用 action 函数，触发

mutations:{     //mutations属性修改数据，组件中this.$store.commit('setNumber') 触发setNumber方法修改数据
        setNumber2(state){
            return state.number++;
        }
    },
actions:{
        doasync(context){
            setTimeout(()=>{
                context.commit('setNumber2')
            },2000)
        }
    }

import { mapActions, mapGetters, mapMutations, mapState } from "vuex";

 methods: {
    ...mapActions(["doasync"]),
    handle() {
      console.log("更新数据");
      console.log("旧值" + this.$store.state.number);	// 0
      this.doasync();
      setTimeout(() => {
        console.log("新值" + this.$store.state.number);	// 1
      }, 3000);
    },