vuex的使用笔记

1.安装

npm安装

npm install vuex@next --save

yarn安装

yarn add vuex@next --save

2.基本结构

import Vuex from 'vuex'

const store = createStore({
//状态：相当于vue中的data（）
state() {
 return {
      name: 0,
      code:"",
      todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
    }
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  },
  //更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
  //mutation 必须同步执行
  mutations: {
         saveName(state,name){
            state.name= name;
        },
         saveCode(state,code){
            state.code= code;
        },
  },
  //Action 类似于 mutation
  //Action 提交的是 mutation，而不是直接变更状态
  //Action 可以包含任意异步操作
  actions: {
  //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
  //Action 通过 store.dispatch 方法触发
   increment (context) {
      context.commit('increment')
    }
  },
})
 
export default store 

3.多模块的结构

import Vuex from 'vuex'
const module1 = {
//开启命名空间
  namespaced: true,
 state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const module2 = {
//开启命名空间
  namespaced: true,
 state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const module3 = {
//开启命名空间
  namespaced: true,
 state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
const store = createStore({
modules: {
    module1: module1,
    module2: module2,
    module3: module3,
  }
})
export default store 

main.js 注册store

// 引入仓库
import store from 'path';
 
new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

4.使用方法

1.获取状态

//方法1
this.$store.state.状态名
//方法2 多模块的状态名
this.$store.state.模块名.状态名
//方法3 单模块映射的方式，在vue中的计算属性中混入
computed：{
...mapState({
 '状态名1',
 '状态名2',
 ...
})
}
//使用‘this.状态名即可获取’
//多模块映射的方式
computed：{
...mapState({
    module1: state => state.some.nested.module.module1,
    module2: state => state.some.nested.module.module2
  })
}

2.调用getter

//直接使用
this.$store.getters.doneTodosCount
//映射的方式
computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }

3. 调用mutations

//方法1 使用this.$store
//1.b不带参数
this.$store.commit('mutations的方法名')
//2.带参数
this.$store.commit('mutations的方法名',parmas)
//3.多模块的调用方式
this.$store.commit('模块名/调用模块的mutations的方法名',parmas)
//4.映射的方式 在methods中使用
methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
  }

4.调用Action

//通过this.$store.dispatch 方法触发
//映射的方式 在methods中使用import { mapActions } from 'vuex'
 methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }