Vue 中的store 的使用

在我們開發vue項目的時候， 創建項目中會有一項配置詢問是否使用vuex 這裏的vuex就是狀態管理器，在實際項目開發中，這個東西可以幫助我們完成一些數據的存儲和管理。接下來我們來了解一下目錄構建：

1.state -->狀態樹：定義需要管理的數組、對象、字符

2.getter --> 類似計算屬性，當需要從store的state中派生出一些狀態，就需要使用getter，getter會接受state作爲第一個參數，
而getter的返回值會根據它的依賴緩存起來，只有getter中的依賴值發生改變纔回重新計算

3.mutation --> 更改store中state狀態的唯一方法就是提交mutation。每個mutation都有一個字符串類型的事件和一個回調函數，
我們需要改變state的值就要在回調函數中改變。我們要執行這個回調函數，那麼我們需要執行一個相應的調用方法：store.commit

4.action -->action可以提交mutation，在action中可以執行store.commit，而且action中可以有任何的一步操作。在頁面中如果
要使用action，則需要執行store.dispatch

5.module -->module其實只是解決了當state中很複雜臃腫的時候，module可以將store分割成模塊，每個
模塊中擁有自己的state，mytation，action和getter實例操作
1.引入vuex狀態管理模式 --> npm install vuex --save
2.創建store文件夾，建立store.js --> 在store.js中引入vue 和 vuex

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

import getters from 'getter.js所在位置'

import user from 'user.js所在位置'

const stroe = new Vuex.Store({
  modules:{
     user
  },
  getters
})
export default store

getter.js文件 -->

const getters = {
   name: state => state.user.name,
}
export default getters

user.js文件 -->
 

const user = {
   state:{
      name: ""
   },
   mutations:{
     setName:(state, name) =>{
        state.name = name
    },
   actions:{
       commitName({commit}, name){
          commit("setName", name)
       }
   }
}
export default user

頁面使用： 

<script>
import store from 'store.js的路徑'
data(){
    return{
        name:store.getters.name;//引入getters中的對象
    }
},
methods:{
    useAction(){
            var item="張三";
            store.dispatch('setName',item);
    }
}
</script>