VUEX总结

vuex的核心以及使用

一、 定义:

vuex是一个专为vue.js应用程序开发的状态管理模式，它作用是将应用中的所有状态都放在一起，集中式来管理。

二、使用步骤

1.安装vuex依赖包

cnpm install vuex --save
		或者
npm install vuex --save

2. 导入vuex包在main.js 中注入 vuex

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

三、 五大核心：

3.1 store

vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，
每个vue应用仅且仅有一个store对象。

3.2 一个完整的store的结构是这样的

export default new Vuex.Store({

    state:{
        message:"hello Vuex",
    },
    
    //操作state中的数据
    mutations:{

    },

    //类似于VUE中的计算属性  对于state中的数据紧急性计算
    getters:{

    },

    //操作muntatios中的方法  同步操作
    cactios:{

    },

    //把vuex进行模块处理
    modules:{
        
    }
})

1.state： 用来存储变量。
2.mutations： 相当于我们vue里面方法
3.getters: 相当于组件中的计算属性。
4.actions: 像一个装饰器，包裹mutations，使之可以异步。
5.modules: 这个是对处理过后的状态进行分类。

四、辅助函数

Vuex 实例中有几个辅助函数，用于组件中辅助绑定Vuex中的State、Getters、Actions和Mutations

mapState：为组件创建计算属性以返回Vuex store 中的状态。第一个参数是可选的，可以是一个命名空间字符串，第二个参数可以是数组或对象或函数，用于绑定具体的 Vuex store

mapGetters：为组件创建计算属性以返回 getter 的返回值。其参数同mapState

mapActions：创建组件方法分发action。

mapMutations：创建组件方法提交 mutation。

createNamespacedHelpers：创建基于命名空间的组件绑定辅助函数。其返回一个包含 mapState、 mapGetters、mapActions 和mapMutations 的对象。它们都已经绑定在了给定的命名空间上。

五、基本使用:

新建store.js文件，最后在main.js中引入，并挂载到实列上

六、数据持久化

vuex里面存放的数据，页面一经刷新会丢失

七、解决办法：

存放在localStorage或者sessionStorage里面，进入页面时判断是否丢失，丢失再去localStorage或者sessionStorage里面取