1.什么是vuex
vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储来管理应用所有组件的状态,并以相应的规则来保证状态以一种可预测的方式发生变化。
2.为什么要使用vuex
当多个组件依赖于同一状态或者来自不同vue页面的行为需要变更为同一状态(也就是共享数据)
在实际业务中,跨组件共享数据的需求,vuex的设计就是用来统一管理组件状态的。
3. 前置条件和要注意的点
package.json 中要有类似节点:
"dependencies": {
"vuex": "^3.4.0"
}
没有要补上后运行 npm install 重新编译工程 。
工程的 src 目录中要有 store 目录,其中要建一个 index.js 文件,内容如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
getters: {
},
mutations: { // 修改器,改state的数据
},
actions: { // 动作,动作调用修改器 ,修改器 改 state
},
modules: { // 模块
}
})
src的main.js下要有如下代码:
import store from './store'
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
注意的点:
vuex 可以用于在不同的组件和vue页面中共享数据,但是不能刷新页面,刷新页面会重置vuex数据 。因此请尽量用路由跳转vue页面。
4. 状态 state 的用法
前置条件:
在 store目录的index.js文件中的 state 节点加入要共享的状态,代码如下:
state: {
count:0,
scores:[1,2,3,4,5,6,7,8,9]
}
vue页面上的用法(所有页面都可以共享):
<h2>count : {{ $store.state.count }}</h2>
script 标签中的methods节点中的函数:
add(){
this.$store.state.count++;
}
5. getters 读取器
前置条件:
在 store目录的index.js文件中的 getters节点加入函数,代码如下:
getters: {
// 返回大于6的数字
filterScores(state){
let arr = state.scores.filter( (value) =>{
if(value > 6){
return value;
}
});
return arr;
}
}
vue页面上的用法:
<ul>
<li v-for="item in $store.getters.filterScores">
{{ item }}
</li>
</ul>
6.mutations修改器
前置条件:
在 store目录的index.js文件中的 mutations节点加入函数,代码如下:
mutations: { // 修改器,改state的数据
addCount(state){
state.count += 10 ;
},
addScores(state,num){
state.scores.push(num);
}
}
script 标签中的methods节点中的函数:
addCount(){
// 调用修改器mutations
this.$store.commit("addCount");
}
7. actions 动作
前置条件:
在 store目录的index.js文件中的 actions节点加入函数,代码如下:
actions: { // 动作 调用 修改器 , 修改器 改 state
count(context){
context.commit("addCount");
},
scores(context,num){
context.commit("addScores",num);
}
}
script 标签中的methods节点中的函数:
addLi(){
// 调用 action 改数据
this.$store.dispatch("scores",this.liNum);
}
8.vuex使用时要注意的点
不要直接在页面修改state , 正确的做法 如下:
(1)在 mutations 中写操作 state 的函数
(2)在 actions 中写函数来调用 mutations
(3)页面上写函数调用 actions