一.vuex是什么
vuex 是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件间数据的共享
好处:1.能够在vuex中,集中管理共享的数据,易于开发和后期维护 2.能够高效地实现组件之间的数据共享,提高开发效率 3.存放在vuex中的数据都是响应式的,能够实时保持数据与页面的同步.
二.如何安装,引入 vuex 步骤
1.安装 npm install vuex --save
2. src 里面创建 store 文件夹,创建 index.js 配置 vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
//存放的内容所有组件都可以访问,类似于data
name:"张三'
},
mutations: {},
actions: {},
modules: {},
});
3.在 main.js
import store from "./store"; // 引入 store
Vue.config.productionTip = false;
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
三. vuex 的核心概念
1.state
提供唯一的公共数据源,所有共享数据都要统一放到 Store 中的 state 进行存储,相当于 data 数据
组件访问 State 中的数据
第一种
this.$store.state // 全局数据名称
this.$store.state.name // 访问state里面的name
第二种
1.从vuex中按需导入 mapState 函数
import {mapState} from 'vuex'
2.通过刚才导入的 mapState 函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性
computed:{
...mapState(['name'])
}
注意点:在其他方法中不要直接修改 state 里面的值,想要修改使用Mutation
2.mutation
用于变更 state 中的数据
提交更新数据的方法,必须是同步的(如果需要异步使用 action )
通过这个方式虽然操作起来稍微繁琐一些,但是可以集中监听所有数据的变化
第一种触发
// 定义mutation
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
// 第一个参数是 state 对象 第二个参数是传递的参数
add(state,va){
state.count += va
}
}
})
// 触发 mutation
methods:{
aa(){
// add是 mutation 里面的方法
this.$store.commit('add')
}
}
第二种触发
1.从 vuex 中按需导入 mapMutations 函数
import {mapMutations} from 'vuex'
2.将制定的mutations函数,映射为当前组件的methods函数中
methods:{
...mapMutations(['add'])
}
commit 用来触发 mutation 里面方法用的
this.$store.commit('mutations方法名',值)
3.action
用于异步操作
与mutation功能大致相同,不同之处在与action提交的是mutation,而不是直接变更状态,可以包含异步操作
注意点:如果通过异步操作变更数据,必须通过action,而不能通过mutation,但是在action中还是要通过触发mutation的方式间接变更数据
// 定义 action
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
add(state,num){
state.count += num
}
},
actions:{
// 第一个参数是context 第二个参数是传递的参数
addAsync(context){
setTimeout(()=>{
context.commit("add",1000) // commit用来触发mutation里面方法的
})
}
}
})
触发action:
第一种触发
methods:{
abc(){
// addAsync 是actions里面的方法
// dispatch 用来触发action里面的方法
this.$store.dispatch('addAsync')
}
}
第二种触发
1.从vuex中按需导入mapActions函数
import {mapActions} from 'vuex'
2.将制定的mapActions函数,映射为当前组件的methods函数中
methods:{
...mapAction(['addAsync'])
}
4.getter
从基本数据state派生的数据,相当于state的计算属性,具有返回值的方法,会返回一个新数据,不会影响到state里面的老数据,
store中的数据发生变化,getter的数据也会跟着变化
const store = new Vuex.store({
state:{
count:0
},
getters:{
userId:function(state){
return state.count * 2
}
}
})
触发方式:
第一种
this.$store.getters.userId
第二种
import {mapGetters} from 'vuex'
computed:{
...mapGetters(['userId'])
}
使用 {{userId}}
5.modules 模块化vuex
可以让每一个模块拥有自己的state,mutation,action,getters使得结构非常清晰,方便管理
什么情况下使用vuex:1.多个视图依赖于同一状态(特指依赖多层嵌套组件的某一状态) 2. 来自不同视图的行为需要变更同一状态
一般结构如下:
const moduleA = {
state: { count:0 },
mutations: {
changeName(state) {
state.name = '李四';
}
},
actions: {
aUpdateName(context, payload2) {
setTimeout(() => {
context.commit('UpdateName',"payload1");
console.log(payload2);
}, 1000);
}
},
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
})
// 使用
其他组件调用 (获取 state 的变量需要加上引入的 module的别名)
$store.state.a.count
$store.state.b
methods:{
change(){
this.$store.commit('changeName')
},
Update(){
this.$store.dispatch("aUpdateName","payload2")
}
}