Vuex快速入门

Vuex是什么？
做数据共享和传递（不同页面之间的数据传递）
单一状态树管理，让数据的修改脉络更佳清晰，便于定位问题，模块化
Vuex有什么
State：要共享的数据（全局变量）
Getter：相当于vue中computed，及计算属性，可以用于监听，计算state中的值的变化
Mutation：Vuex中去操作数据的方法（只能同步执行）
Action：用来操作Mutation的动作，他不能自己去操作数据源，但可以把mutation变为异步的
Modules：即分类管理状态值
在src目录下新建一个store文件夹
然后在main.js文件中注册vuex的实例

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 按需导入
import {addLocalGoods,getTotalCount,updateLocalGoods,delectLocalGoods} from '../common/localStorage.js'

export default new Vuex.Store({
    // 在state中去声明全局变量，可以通过 this.$store.state 访问
    state: {
     buyCount:0
    },
    // 在getters中声明state中变量的计算函数，缓存计算后的数据， 通过 this.$store.getters 调用
    getters: {
        // 接受state作为参数，每次 count发生变化时 ， 都会被调用
         getBuycount:state=>{
            // return state.buyCount
            return state.buyCount > 0 ? state.buyCount : getTotalCount()
        }
    },
    // 只能执行同步方法，通过 this.$store.commit 方法调用
    mutations: {
        // 改变state状态的方法，不建议直接通过  
        // this.$store.state.? = ？的方式改变state中的状态
       //载荷goods === {goodsId:100,count:3}
        addGoods(state,goods){
            // state.buyCount += goods.count
            state.buyCount = addLocalGoods(goods)
        },
        updateGoods(state,goods){
            state.buyCount = updateLocalGoods(goods)
        },
        delectgoodsId(state,goodsId){
            state.buyCount = delectLocalGoods(goodsId)
        }
    },
    // 借助actions的手去 执行 mutations ， 通过  this.$store.dispatch 的方式调用
    // 可以用来执行异步操作，可以跟踪异步数据状态变化
    actions: {
          addGoods: content => {
            // 调用 mutation
            content.commit('addGoods');
        },
         updateGoods: (content, n) => {
            content.commit(' updateGoods', n);
        }
    }
})

这些就是vuex中最基础的概念，了解了这些，就可以入门vuex了，有哪里不明白的或不对的，留言下，咱们可以一起讨论、共同学习！