[TOC] >[success] # Vuex -- 參數使用理解  ~~~ 1.'Store' -- vuex 的倉庫儲存這我們需要使用的參數內容在創建的時候使用: new Vuex.Store({}) 2.'state' -- 可以理解成Vue中的data，我們的一些公共數據放在這里 3.'mutations' -- 可以理解成Vue中的methods。也可以理解成java的set。簡單的說 所有對'state' 中的數據更改都是通過'mutations' 中的方法操控，Vuex 不提倡直接 更改'state' 中的數據 4.'getters' -- 可以理解成Vue的computed 計算屬性，或者java中的get，當我們要 獲取'state' 中的方法的時候從getter中取值 5.'Action' -- 異步獲取請求參數賦值，他會操控'mutations',再讓'mutations'給 'state' 賦值 6.'module' -- ~~~ >[danger] 全套寫法 >[info] ## 簡單案例 -- 只分析state ~~~ 1.下面的案例只是演示如何最簡單的展示'state' 中的數據 實際開發中是不會這么 用的 ~~~ >[danger] ##### store文件下的state.js中內容 ~~~ 1.state 相當于vue中的data 我們在里面創建了一個'appName' data ~~~ ~~~ const state= { appName:'admin', }; export default state ~~~ >[danger] ##### 在views文件夾下創建視圖組件store.vue ~~~ 1.由于我們在mian.js 中的vue.js 實例中使用了'store',因此在全局的組件中我們都 可以調用這個Vuex創建出來的實例，調用的時候使用vue慣有的$調用即可，下 面的案例就是展示了在'store.vue' 視圖中，如何直接使用Vuex 中存的數據展示 2.下面的方式 我們不推薦，但是可以看出使用方法是'this.$store.state.存值的名稱' 3.也可以發現使用的時候我們在計算屬性中定一個了一個方法，作為用來接受 vuex中對應值 ~~~ ~~~ <template> <div> <p>{{appName}}</p> </div> </template> <script> export default { name: "store", data(){ return{} }, methods:{}, computed:{ // 在計算屬性中 創建一個方法用來接受 vuex 中的stat appName(){ return this.$store.state.appName; } } } </script> <style scoped> </style> ~~~ >[info] ## 簡單案例-- 如何獲取模塊中的state ~~~ 1.我們在創建'store' 文件夾的時候，為了做進一步的拆分，我么拆分出來一個 module 文件夾，這里面存放了一個user 模塊，下面的案例展示展示了如何獲取 模塊中的vuex ~~~ >[danger] ##### 在stor文件下的module文件下的user.js寫法 ~~~ const state = { userName: 'Wang' }; const mutations = { }; const actions = { }; export default { state, mutations, actions, } ~~~ >[danger] ##### 在views文件夾下創建視圖組件store.vue ~~~ 1.在計算屬性中 創建一個方法用來接受 vuex 中的state，掉用的時候 'this.$store.state.模塊名.模塊中' ~~~ ~~~ <template> <div> <p>{{userName}}</p> </div> </template> <script> export default { name: "store", data(){ return{} }, methods:{}, computed:{ // 在計算屬性中 創建一個方法用來接受 vuex 中的stat userName(){ return this.$store.state.user.userName; } } } </script> <style scoped> </style> ~~~ >[info] ## getters -- 頁面獲取值 ~~~ 1.文章最開始說過不推薦直接使用'state' 并且將內容展示和更改，因此當我們想使 用'state' 的值的時候。我們需要使用vuex中的'getters'。'getters' 相當于vue中的計 算屬性。它是一個方法監聽方法內部調用的state 值發生改變，如果改變就做出對 應的操作 2.根據上面的描述可以勾勒出getters內部是一個個方法，這個方法可以使用到 state中要監聽的具體值，因此寫法如下: const getters = { // state 就是vuex 倉儲中的state // getters 有點類似vue中的計算屬性來監聽內部使用的state值的變化 // 根據state 對應值變化顯示對應信息 appNameWithVersion:(state) =>{ return `${state.appName}v2.0` } }; export default getters ~~~ >[danger] ##### store文件下的getters.js中內容 ~~~ const getters = { // state 就是vuex 倉儲中的state // getters 有點類似vue中的計算屬性來監聽內部使用的state值的變化 // 根據state 對應值變化顯示對應信息 appNameWithVersion:(state) =>{ return `${state.appName}v2.0` } }; export default getters ~~~ >[danger] ##### 在views文件夾下創建視圖組件store.vue ~~~ 1.使用步驟和'state' ，使用起來'this.$store.getters.對應的getters值' ~~~ ~~~ <template> <div> <p>{{appName}}</p> <p>{{userName}}</p> </div> </template> <script> import { mapState } from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{}, computed:{ // 在計算屬性中 創建一個方法用來接受 vuex 中的getter appName(){ return this.$store.getters.appNameWithVersion; }, } } </script> <style scoped> </style> ~~~ >[info] ## mutations -- 操控值 ~~~ 1.當我們想改變'state' 中的值的時候可以使用'mutations ',它相當于vue的method ，也就是是可以理解我們來觸發Vuex 中的'mutations '方法來改變getters值 2.每個'mutations ' 中定義的參數兩個值，第一個值是Vuex中的'state' 對象，第二 個是，傳遞過來的參數，也是一個對象 3.如何使用，在Vuex 的'mutations ' 定義好之后，在對應的組件中的methods 方 法去觸發，有點類似子傳父，使用方法: this.$store.commit('mutations 中的方法名','參數對象') ~~~ >[danger] ##### store文件下的getters.js中內容 ~~~ const mutations= { SET_APP_NAME(state,params){ state.appName = params }, }; export default mutations ~~~ >[danger] ##### 在views文件夾下創建視圖組件store.vue ~~~ <template> <div> <p>{{appNameWithVersion}}</p> <button @click="handleChangeAppVersion">點擊</button> </div> </template> <script> import { mapGetters } from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{ handleChangeAppVersion(){ this.$store.commit('SET_APP_NAME','版本') }, }, computed:{ ...mapGetters(['appNameWithVersion']) } } </script> <style scoped> </style> ~~~ >[danger] ##### 另一種用法 ~~~ 1.上面在 this.$store.commit('mutations 中的方法名','參數對象') 傳遞的是兩個參 數，下面這種傳遞是一個對形象 ~~~ ~~~ const mutations= { SET_APP_NAME(state,params){ state.appName = params.appName }, }; export default mutations ~~~ ~~~ <template> <div> <p>{{appNameWithVersion}}</p> <button @click="handleChangeAppVersion">點擊</button> </div> </template> <script> import { mapGetters } from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{ handleChangeAppVersion(){ this.$store.commit({ type:'SET_APP_NAME', appName:'版本' }) }, }, computed:{ ...mapGetters(['appNameWithVersion']) } } </script> <style scoped> </style> ~~~ >[info] ## 思考如果沒在'state' 定義那么'mutations '怎么使用 ~~~ Mutation 需遵守 Vue 的響應規則，最好提前在你的 store 中初始化好所有所需屬性。 當需要在對象上添加新屬性時，你應該 1.Vue.set(obj, 'newProp', 123) 2.以新對象替換老對象。例如，利用 stage-3 的對象展開運算符我們可以這樣寫： state.obj = { ...state.obj, newProp: 123 } ~~~ >[danger] ##### 舉個例子 ~~~ 1我們沒有在state中定義time，但是在mutations 中應該怎么使用呢 2.注意要是沒用定義的值想在組件中使用需要定義'mapState ' ~~~ ~~~ import vue from 'vue' const mutations= { SET_APP_NAME(state,params){ state.appName = params.appName }, SET_Time(state,params){ vue.set(state,'timee','17:00') } }; export default mutations ~~~ ~~~ <template> <div> <p>{{appNameWithVersion}}</p> <p>{{timee}}</p> <button @click="handleChangeAppVersion">點擊</button> <button @click="handleChangetime">時間</button> </div> </template> <script> import { mapGetters,mapState } from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{ handleChangeAppVersion(){ this.$store.commit({ type:'SET_APP_NAME', appName:'版本' }) }, handleChangetime(){ this.$store.commit({ type:'SET_Time', }) }, }, computed:{ ...mapState(['timee']), ...mapGetters(['appNameWithVersion',]) } } </script> <style scoped> </style> ~~~