基本使用
- 作用
vuex是用來做狀態管理的，就是將部分數據集中存儲起來，實現每個組件之間的共享。
- 安裝
npm install vuex --save
- 創建store目錄
- 編輯index.js
import Vue from 'vue'
import Vuex from 'vuex'
// 1.安裝插件
Vue.use(Vuex)
// 2.創建對象
const store = new Vuex.Store({
state:{
name:"vuex原始數據"
},
mutations:{
change(state,payload) {
state.name = payload
}
},
getters:{
getPlus(state){
return state.name + "---getters擴展數據";
}
}
})
// 導出對象
export default store
- 掛載到main.js
import Vue from 'vue'
import App from './App.vue'
import router from "./router";
// 導入
import store from "./store";
Vue.config.productionTip = false
new Vue({
render: h => h(App),
router:router,
// 掛載
store:store
}).$mount('#app')
state的使用
- 概念
state中要聲明我們要管理的數據，它可以被所有組件共享。
- 在state中初始化數據
const store = new Vuex.Store({
state:{
name:"vuex原始數據"
}
})
- 在組件中使用
<template>
<div>
<h1>首頁組件</h1>
<h2>{{$store.state.name}}</h2>
</div>
</template>
getters的使用
- 概念
可以直接將它理解爲vue中的計算屬性。
- 在js中創建getters
const store = new Vuex.Store({
state:{
name:"vuex原始數據"
},
getters:{
getPlus(state){
return state.name + "---getters擴展數據";
}
}
})
- 在組件中使用
<template>
<div>
<h1>首頁組件</h1>
<h3>{{$store.getters.getPlus}}</h3>
</div>
</template>
- getters作爲參數和getters傳遞參數
getters: {
fullname(state) {
return state.name + '11111'
},
fullname2(state, getters) {
return getters.fullname + '2222'
},
fullname3(state, getters, rootState) {
return getters.fullname2 + rootState.counter
}
}
getters默認是不能傳遞參數的, 如果希望傳遞參數, 那麼只能讓getters本身返回另一個函數
mutations的使用
- 概念
它的作用就是提供讓組件修改state中數據的接口。
- 定義mutations
const store = new Vuex.Store({
state:{
name:"vuex原始數據"
},
mutations:{
change(state,payload) {
state.name = payload
}
}
})
payload爲組件傳進來的參數，如果有多個參數要傳入，應傳入一個對象。
- 在組件中使用
export default {
name: "home",
methods:{
change(){
// 第一個參數是mutations的方法名，第二個是要傳入的數據
this.$store.commit('change',"Home數據");
}
}
}
// 1.普通的提交封裝
this.$store.commit('incrementCount', count)
// 2.特殊的提交封裝
this.$store.commit({
type: 'incrementCount',
count
})
// 3.傳入對象
const stu = {id: 114, name: 'alan', age: 35}
this.$store.commit('addStudent', stu)
- 響應規則
Vuex的store中的state是響應式的, 當state中的數據發生改變時, Vue組件會自動更新.
這就要求我們必須遵守一些Vuex對應的規則:
提前在store中初始化好所需的屬性.
當給state中的對象添加新屬性時, 使用下面的方式:
方式一: 使用Vue.set(obj, 'newProp', 123)
方式二: 用新對象給舊對象重新賦值
actions的使用
- 概念
爲了是vue的開發工具vue-devtools能夠監聽所有變量的變化，所有的異步操作都應該有actions來完成
- 基本使用
- context是什麼?
context是和store對象具有相同方法和屬性的對象.
也就是說, 我們可以通過context去進行commit相關的操作, 也可以獲取context.state等.
modules的使用
- 概念
它就是爲了解決只有一個vuex對象在數據過多的情況下會導致不好管理的情況，一個module就是一個小vuex對象。
- 基本使用
// module對象
const moduleA = {
state: {
name: 'zhangsan'
},
mutations: {
updateName(state, payload) {
state.name = payload
}
},
getters: {
fullname(state) {
return state.name + '11111'
},
fullname2(state, getters) {
return getters.fullname + '2222'
},
fullname3(state, getters, rootState) {
return getters.fullname2 + rootState.counter
}
},
actions: {
aUpdateName(context) {
console.log(context);
setTimeout(() => {
context.commit('updateName', 'wangwu')
}, 1000)
}
}
}
const store = new Vuex.Store({
modules: {
a: moduleA
}
})
<h2>{{$store.state.a.name}}</h2>