vuex应用

vuex 应用

1. 首先安装依赖

npm install vuex --save

2. 在src下创建store文件夹，创建store.js文件
   
   store.js内容：

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   

3. 在main.js中加入

   import store from './store/store'
   //在这里加上store
   new Vue({
     el: '#app',
     router: router,
     store,
     render: h => h(App)
   })
   

4. 需要给消息赋一个值，在store.js里面写：

   import Vue from 'vue'
   import Vuex from 'vuex'
   
   Vue.use(Vuex)
   
   const state = {
       messageNum: 0 //消息数量
   };
   var vuexStore = new Vuex.Store({
       state
   });
   
   // 使用 export default 封装，让外部可以访问
   export default vuexStore;
   

5、在页面上引用

<script>
import store from "../store/store.js";
export default {
  components: {
         store
    },
};
</script>

6、加上一个简单的赋值功能，在store.js里加上

const mutations= {
  setMessage (state, num) {
    state.messageNum = num;
  },
  setCartnumber(state,num){
    state.cartNum = num;
  }
};

var vuexStore = new Vuex.Store({
    state,
    getter,
    mutations,
    actions

});

7. 在消息通知的页面引用，并用方法出发值的改变

/*
setCartnumber:赋值的方法
this.totleNum：请求过来的数量
*/
this.$store.commit('setMessage ', this.totleNum); 

8. 这样在消息页面值改变的时候，全局的数量都会跟着变了