一、安装
npm install vuex --save二、使用
import Vue from 'vue' import vuex from 'vuex' Vue.use(vuex)三、核心概念
1.state(vuex中的数据源,存放所有数据)--------login.js
const state ={ countser:null //登陆id }2.getter(相当于vue中的computed计算属性,用来监听state中值的变化)
3.mutation(修改值,更改vuex的store中的状态的唯一方法就是提交 mutations。只能是同步操作)--------login.js
mutations 上存放的一般就是我们要改变 state 的一些方法。不能直接调用,调用时需要store.commit方法
const mutations ={ //登陆id increment(state,n){ state.countser=n } }4.action(action提交的是mutation,而不是直接更改状态。可以是异步操作)--------login.js
mutation 像事件注册,需要相应的触发条件。而 Action 就那个管理触发条件的。
const actions ={ //登陆id increment(context,args){ //context是和store具有相同方法和属性的一个对象 context.commit('increment',args); //increment就是Mutation里的方法名 }, }5.moudel(将 store 分割成模块module。每个模块拥有自己的 state、mutation、action、getter)
6.命名空间(在index.js最终导出时,可以去给对应的模块命名方便使用)--------login.js
export default { namespaced: true, //vuex命名空间 }注:最后导出--------login.js
export default { //导出 namespaced: true, //vuex命名空间 state, actions, mutations }7.vuex持续化--------index.js
vuex保存的数据在页面刷新、窗口关闭等情况下会被清除,所以用vuex持续化来解决这个问题,这样它的数据就不会被清除了。
①安装
npm install vuex-persistedstate --save②导入---------index.js
import createPersistedState from "vuex-persistedstate" //vuex 持续化③实例化时添加
plugins: [ createPersistedState({ storage: { getItem: key => wx.getStorageSync(key), setItem: (key, value) => wx.setStorageSync(key, value), removeItem: key => () => {} } }) ] 或者 conststore = newVuex.Store({ plugins: [createPersistedState({ storage:window.sessionStorage, reducer(val) { return { assessmentData: val.assessmentData } } })]例子:
import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate" //vuex 持续化 Vue.use(Vuex) import loginuser from './modules/login' //导入模块 export default new Vuex.Store({ plugins: [createPersistedState({ storage: window.localStorage, //数据存储位置 reducer(val) { return { loginuser:{ //选择指定模块数据存储 countser:val.loginuser.countser } } } })], // 导出 store 对象 modules:{ loginuser:loginuser } })mutation 就像事件类型,需要给定某个动作来进行触发,这就是分发 action。Action 通过 store.dispatch 方法触发。
注:存储
this.$store.dispatch('loginuser/increment',res.data.id);注:当vuex存的值发生变化时,取值的地方可以直接响应为新的值。但是local storage和session storage不能响应。
local storage---永久保存 session storage----临时保存(浏览器关闭或刷新时会丢失)