深入解析Vue.js Vuex核心概念与实战应用

this.$store.state.变量名

如：
state:{
	count: 1
},
getters:{ 
     getCount(state) {
         return state.count + 1
     }
  },

this.$store.getters.getCount
<h2>{{this.$store.getters.getCount}}</h2>

this.$store.commit("方法名")
//可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
store.commit('increment', 10)
// ...
mutations: {
  increment (state, n) {
    state.count += n
  }
}

const moduleA = {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}
const moduleB = {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
}
export default new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
// 在各自的模块内部使用
state.price // 这种使用方式和单个使用方式一样，直接使用就行
//在组件中使用
store.state.a.price // 先找到模块的名字，再去调用属性
store.state.b.price // 先找到模块的名字，再去调用属性

// main.js内部对vuex的配置
import store from '@/store/index.js' 
new Vue({
    el: '#app',
    store, // 将store暴露出来
    template: '<App></App>',
    components: { App }
});

import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) 
export default new Vuex.Store({
    state: { 
        // state 类似 data
        //这里面写入数据
    },
    getters:{ 
        // getters 类似 computed 
        // 在这里面写个方法
    },
    mutations:{ 
        // mutations 类似methods
        // 写方法对数据做出更改(同步操作)
    },
    actions:{
        // actions 类似methods
        // 写方法对数据做出更改(异步操作)
    }
})

import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex) 
export default new Vuex.Store({
    state: { 
        price: 100, // 原价
        total: '',  // 总价
    },
    getters:{ 
        // 折扣价
        discount(state, getters) {
            return state.price*0.8
        }
    },
    mutations:{ 
        // 计算总价：第一个参数为默认参数state, 后面的参数为页面操作传过来的参数
        getTotal(state, n) {
            return  state.total = state.price * n;
        }
    },
    actions:{
        // 这里主要是操作异步操作的，使用起来几乎和mutations方法一模一样
        // 除了一个是同步操作，一个是异步操作，一个使用commit调用，一个使用dispatch调用
        // 这里就不多介绍了，有兴趣的可以自己去试一试，
        // 比如你可以用setTimeout去尝试一下
    }
})

```javascript
<template>
  <div>
    <p>原价：{{price}}</p>
    <p>8折：{{discount}}</p>
    <p>数量：<input type="text" v-model="quantity"></p>
    <p>总价：{{total}}</p>
    <button @click="getTotal">计算总价</button>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        quantity: 0,
      }
    },
    computed: {
      price() {
        return this.$store.state.price
      },
      discount() {
        return this.$store.getters.discount
      },
      total() {
        return this.$store.state.total
      }
    },
    mounted() {
    },
    methods: {
      getTotal() {
        this.$store.commit('getTotal', this.quantity)
      }
    },
  }
</script>

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store（{
    state: {
       orderList: [],
       menuList: []
   },
    mutations: {
        orderList(s, d) {
          s.orderList= d;
          window.localStorage.setItem("list",jsON.stringify(s.orderList))
        },  
        menuList(s, d) {
          s.menuList = d;
          window.localStorage.setItem("list",jsON.stringify(s.menuList))
       },
   }
}）

if (window.localStorage.getItem("list") ) {
        this.$store.replaceState(Object.assign({}, 
        this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}