vue状态管理器

一、使用状态管理器的好处

能够在vuex中集中管理共享数据，易于开发和后期的维护
能够高效的实现组件之间的数据共享，提高开发效率
存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步

二、什么样的数据适合存储在vuex中

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中私有的数据，依旧存储在组件自身的data中即可。

三、vuex核心

1、获取

state: 提供唯一公共数据源，所有共享的数据都要放到store的state中进行存储
方式一：组件访问state中的数据
this.$store.state.全局数据名称

方式二

1、 从vuex中按需导入mapstate函数
import { mapState} form 'vuex'

2、通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：
computed:{
...mapState(['count'])
}

2、变更Mutation

 // store.js
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 666
  },
  mutations: {
    addN(state, step) {
      state.count += step;
    },
    subN(state, step) {
      state.count -= step;

    }
  },
  actions: {},
})

Mutation用于变更Store中的数据

只能通过Mutation操作store中的数据，不能直接更改store中的数据，通过这种方式虽然看起来繁琐，但是使用Mutation方便后期的维护

变更mutation的方式一

// 在store.js里面添加mutation
mutations: {
    add(state) {
      state.count++;
    }
  },

// 组件内更改数据
this.$store.commit('add');

可以在触发mutations时传递参数：

 mutations: {
    addN(state, step) {
      state.count += step;
    }
  },

click(){
this.$store.commit('addN',10);
}

变更mutation的方式二

1、从vuex中按需导入mapMutations函数
import {mapMutations } from 'vuex'

2、通过刚才导入的mutations函数，映射为当前的methods函数
methods:{
    ...mapMutations(['addN']);
    handleClick(){
        this.addN(2)
   }
}

注意点
如果通过异步操作变更数据，必须通过Action，而不能使用Mutation。但是在action中还是通过触发Mutation的方式间接的变更数据


const store  = new Vuex.Store({
// ...省略其他代码
mutations:{
    add(state){
      state.count++
      }
  }
})

// 定义action   commit只能commit mutation里面的某个函数
actions:{
    addAsync(context){
        setTimeout(()=>{
             context.commit('add'),1000})
          }
    }

最后编辑于：2021.03.29 15:46:31