vue项目中使用vuex

1、运行

cnpm i vuex -S

2、导入包

import Vuex from 'vuex'

3、注册vuex到vue中

Vue.use(vuex)

4、

var  store  = new Vuex.Store({
   state:{
     count: 0
    },
    munctions: {
       setCount：(state , count)=>{
         state.count  = count
       }
     },
    getters:{
       // 注意：这里的  getters , 只负责 对外提供数据，不负责 修改数据，如果想要修改则去munctions
       optCount：(state) =>{
          return '当前最新的count值是：'+ state.count
       }
        // 经过咋们的回顾对比，发现 getter 中的方法，和组件中的过滤器比较类似因为过滤器和getters 都没有修改原来数据 都是把原来的数据做了一层包装，提供给 调用者
        //其次 getters 也和 computed 比较像，只要state 中的数据发什么了变化 如果getters正好也引用了这个数据，那么就会立即触发 getters 的重新求值 ；
      }
})      
 
import App from './App.vue'
 
const vm  new Vue({
　　el: '#app',
　　render: c=>c(App）,
　　store //5、将 vuex 创建的 store 挂载到你vm 实例上，只要挂载到了vm 上 任何组件才都能使用store 来读取数据
})

总结：

1、state中的数据，不能直接修改，如果想要修改，必须通过 munctions

2、如果组件想要直接从  state 上获取数据：需要 this.$store.state.****

3、如果组件，想要修改数据，必须使用 munctions 提供的方法，需要通过 this.$store.commit('方法名称，唯一的一个参数')

4、如果 store 中的state 上的数据，在对外提供的时候，需要做一层包装，那么，推荐使用 getters，如果需要使用 getters ，则用 this.$store.getters.***