Vuex的使用

Vuex的使用

Vuex的概念

概念：
vuex 是 Vue 配套的 公共数据管理工具，它可以把一些共享的数据，保存到 vuex 中，方便 整个程序中的任何组件直接获取或修改我们的公共数据；

配置Vuex的步骤

1. 运行 cnpm i vuex -S
2. 导入包 import Vuex from 'vuex'
3. 注册vuex到vue中 Vue.use(Vuex)
4. new Vuex.Store()实例，得到一个数据仓储对象

• state：相当于组件中的data，专门用来存储数据的 ，如果在组件中，想要访问store中的数据，只能通过 this.$store.state.*** 来访问
• mutations：如果要操作store中的state值，只能通过调用mutations提供的方法，才能操作对应的数据，不推荐直接操作state中的数据，相当于组件中的methods
  注意：如果组件想要调用mutations中的方法，只能使用this.$store.commit(‘方法名’)，mutations的函数参数列表中，最多支持两个参数，其中参数1：是state状态 参数2：通过commit提交过来的参数
• getters：getters只负责对外提供数据，不负责修改数据，修改数据找mutations,使用getters，用this.$store.getters.***调用
  注意： getters中的方法和组件中的过滤器比较类似，因为过滤器和getters都没有修改原数据，都是把原数据做了一层包装，提供给调用者；其次，getters和computed也比较像，只要state中的数据发生了变化，那么getters引用这个数据就会立即出发getters重新求值

var store = new Vuex.Store({
  state : {  
    count: 0
  },
  mutations : {
    increment(state){
      state.count++
    },
    subtract(state, obj){
      state.count -= (obj.c+obj.d)
    }
  },
  getters: {
    optCount: function(state){
      return '当前最新的count值是：'+state.count
    }
  }
})

5. 将vuex创建的store挂载到VM实例上，只要挂载到vm上，任何组件都能使用store来存取数据

import App from './App.vue'
import { stat } from 'fs';

const vm = new Vue({
  el: '#app',
  render: c=> c(App),
  store 
})