vuex的安裝配置和存值取值詳解

vuex

 vuex是專爲vue.js應用程序開發的狀態管理模式。它採用集中存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化

按住 shift鍵 的同時 右鍵 你要安裝vuex的項目 然後在彈出的選項框中選擇 在此打開命令窗口 然後按照下面的代碼安裝就可以嘍！

安裝vuex： npm install vuex --save

在命令窗口中安裝好vuex後，接下來就可以在vue中進行vuex的後續操作了

1》在vue項目中的src文件夾中創建store文件夾
2》 在store文件夾中創建index.js文件
3》在js文件中引入 vue和vuex（import Vue from ‘vue’ 和import Vuex form ‘vuex’）
4》Vue.use(Vuex) 在vue中標明使用vuex
5》在main.js中引入store文件夾中的index.js(import store from ‘./store/index.js’)，然後把store放在vue實例化對象中就ok了new Vue({store, render: h => h(App)}).$mount(’#app’)，

 寫一些大項目那麼vuex可以給我們帶來很大的便利，
 開發移動App，如果是開發網頁，可能造成一些數據泄露，導致數據不安全

理解Vuex 的核心

1.通過_state屬性實現中心化、自包含數據中心層。
2.通過 dispatch 方法，回調觸發事先註冊的_mutations方法。

我們需要配置的都已經配置好了，接下來我們可以在store文件夾中的index.js中存值了

index.js

import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
const store = new Vuex.Store({
state: {}, 將你想要存儲的數據信息放在state裏面 例如 存儲用戶信息
state: {
user: {
name: ‘’,
age: ‘’,
tel: ‘’,
isLogin: ‘’
},
status: false
}
mutations: {}, 一個同步的執行函數 在這個裏面可以寫自己要處理的函數 例如要修改user中的name
mutations: {
changeName (state, 你想傳入的值) {
state.name = 你想傳入的值
},
changeTel (state,newTel) { 修改用戶的電話號碼的函數
state.user.tel = newTel
}
}
getters: {}, // getters是一個計算屬性 在getters中可以return一個值 例如我要返回用戶的電話號碼
getter: {
tranTel (state) {
return state.tel
}
}
actions: {}
})
export default store
此處是將本文件導出，然後讓main.js去引入本文件

既然把index.js寫好了，下面我們一起來看一下怎麼存值和取值吧

在vue組件中調用的方法

存值

1、重新賦值的方法

    方法一、 this.$store.commit('要調用的函數名', 你想傳入的數據) 函數是mutations裏面的函數
    例如 要去覆蓋user中的tel
    this.$store.commit('changeTel','1255841311')
    方法二、 在組件中引入對應的mapState,mapMutations,mapGetters,mapActions
    引入的方法 import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
    這些方法不一定都要用可以選擇具體要使用的方法進行引入
    在組件中的methods對象中引入對應的mutations中的方法**
    例如
    methods: {
        ...mapMutations([
        '要引入的方法名' 這個名字可以選擇使用 就是說你想用那個函數就寫上哪個函數的名字
        ])
        比如我要修改用戶的電話號碼
        ...mapMutations([
            'changeTel' 然後這個函數就可以在你想使用的位置通過this.changeTel('你想要改成的新數據')
        ])
    }

取值

2.獲取state中的值得方法

    方法一、 this.$store.state //可以直接獲取所有的數據 不推薦使用
    方法二、 this.$store.getters.你想使用的函數名 這個函數是你的store 裏的js文件中的getters裏面的函數名
    例如 要獲取用戶的電話號碼
    this.$store.getters.tranTel
    方法三 在組件中引入對應的mapState,mapGetters
    引入的方法 import {mapState,mapGetters} from 'vuex' 引入的方法可以根據自己的需求引入 此處爲例子非固定模式
    （1） 在組件中的計算屬性中寫入 
    computed: {
        ...mapState({
            函數名稱（自定義）： （state）=> {
                return state.你想使用的數據變量
            }
        })
    }
    例如
    computed: {
        ...mapState({
            userName： （state）=> {
                return state.user.name
            }
        })
    }
    (2) 也是在計算屬性中寫入 不過方法略有不同
    computed: {
        ...mapState([
        '你想使用的變量名' 要用引號包裹
        ])
    }
    例如 
    computed: {
        ...mapState([
        'user',
        'status' 你可以引入多個值每個值之間用逗號隔開就好了
        ])

}