注：有项目的直接在项目里用，没有项目的创建一个项目：vue create demo  (demo为项目名)

1.在项目中安装运行时依赖：     npm i vuex --save

2.在main.js中引入vuex：      import Vuex from 'vuex'

3.在main.js中注册vuex：

                          Vue.use(Vuex)

4.实例化Vuex：

                 const store = new Vuex.Store()  

5.将store 挂载vue实例上：

         new Vue({

                render: h => h(App),

                 store

         }).$mount('#app')

6.实例化vuex的构造函数     state      mutations      actions：

        //   实例化state

        const store = new Vuex.Store( {

                state: {

                        count: 0  }

         })

6.1、使用之原始形式

效果图：

6.2、使用之计算属性形式

效果图：

6.3、使用之辅助函数形式

效果图：

  //修改state必须通过mutation(state指vuex中的state对象，payload是指提交mutation方法时，传递的参数)   （mutations不能写异步代码）

  mutations: {

      addCount(state, payload) {

        return state.count += payload

      }

    }

（vue的方法中，默认第一个参数是事件参数，第二个参数是时间参数对象 $event）

效果图：

点击前

点击后

//   action   异步操作mutation(通过mutation修改state)

 actions: {

      //第一个参数相当于  this.$state    第二个参数是传参

      getAsCount(context,params) {

        //模拟接口（延时1秒）

        setTimeout(function () {

          context.commit("addCount", params)

        }, 1000)

      }

    }

点击前

点击后

7、vuex的计算属性 getters

     getters: {

         filtersList: state => state.list.filter(item => item > 5)

          }

效果图：

（namespaced是模块化的命名空间）

new