Vuex專案實戰store

首先簡單了解一下什麼是vuex？

vuex是乙個專為vue.js應用程式開發的狀態管理模式。採用集中式儲存來管理應用所有元件的狀態。

以下是對vuex的使用的簡單介紹：

一、安裝

npm i vuex -s    安裝vuex

npm i js-cookie　　安裝cookies，vuex重新整理後資料清空需要儲存至本地

二、建立倉庫，目錄：/src/store/store.js

// store/store.js

// store.js就是你的倉庫  資料都在這裡

import vue from "vue";

import vuex from "vuex";

// 儲存資料太多時用乙個js專門存放封裝函式，這裡建立乙個auth.js

// 這裡只是舉例setuserinfo，getuserinfo ，用作今天的demo，對應auth.js中的方法

// 為了方便展示這裡先直接帶入各種資料寫進demo中

import  from "@/utils/auth";

vue.use(vuex);

// 匯出

export const store = new vuex.store(,

// getters,對倉庫的值進行一定的修正，類似於元件裡面的 computed

// getters，裡面的方法預設接收乙個引數：當前倉庫的狀態值

// 後面通過getter 進行資料獲取

getters: ,

// mutations 修改器，用於修改state中的定義的狀態變數,同步

mutations: 

},// action，存放非同步操作，由 action 去觸發 mutation

actions: , info) 

}});

三、在main.js全域性配置檔案內引入vuex

// main.js

import vue from "vue";
import router from "./router";
import  from "./store/store"; // 引入倉庫
vue.config.productiontip = false;
/* eslint-disable no-new */
new vue();

四、auth.js，將資料存在cookies

import cookies from "js-cookie";

export function getuserinfo() 
export function setuserinfo(userinfo)

這樣一套完整的vuex就已經成型了，接下來就是呼叫和設定

五、設定state

// 同步，呼叫store中mutations
this.$store.commit('set_userinfo',)

// 非同步，呼叫store中actions

this.$store.dispatch('setuserinfo',)

六、獲取state

this.$store.state.userinfo　　//  直接獲取

this.$store.getters.userinfo　　// 通過getters獲取

store檔案Vuex的使用

import vue from vue import vuex from vuex vue.use vuex 首先宣告乙個狀態 state const state 然後給 actions 註冊事件處理函式，當這個函式被觸發時，將狀態提交到 mutaions中處理 const actions comm...

store檔案Vuex的使用

import vue from vue import vuex from vuex vue.use vuex 首先宣告乙個狀態 state const state 然後給 actions 註冊事件處理函式，當這個函式被觸發時，將狀態提交到 mutaions中處理 const actions comm...

搭建vueX目錄架構 store

index.js store入口 import vue from vue import vuex from vuex import setting from modules setting import user from modules user import getters from gette...