一、安裝
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----臨時保存（瀏覽器關閉或刷新時會丟失）
