Vuex是什么?
vuex是一个专为vue.js应用程序开发的状态管理模式(它采用集中式存贮管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化)。
Vuex状态管理跟使用传统全局变量的不同之处
1.Vuex的状态存储是响应式的:就是当你的组件使用到了这个Vuex的状态,一旦它改变了,所有关联的组件都会自动更新相对应的数据,它采用集中式储存管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
2.不能直接修改Vuex的状态:如果是个全局对象变量,要修改很容易,但是在Vuex中不能这样做,想修改就得使用Vuex提供的唯一途径:显示地提交(commint)mutations来实现修改。这样做的好处就是方便我们跟踪每一个状态的变化,在开发过程中调试的时候,非常实用。
优点:
在state中定义了一个数据之后,可以在任何一个组件里进行获取、进行修改、并且你的修改可以得到全局的响应变更。
Vuex的运行机制:
Vuex提供数据(state)来驱动视图(vue components),通过dispath派发actions,在其中可以做一些异步的操作,然后通过commit来提交mutations,最后mutations来更改state。
白话:在组件中通过dispath派发actions,然后在actions中通过context.commit提交到mutations,在mutations中完成对store的修改。store中的数据只能由mutations来修改
核心:
①state: 存储数据的地方,类似一个仓库
②mutations:同步操作,只有mutations才可以修改state中的数据
③actions:异步操作,其实就是调用mutations里面的方法。
④module:面对复杂的应用程序,当管理的状态比较多时;我们需要将vuex的store对象分割成模块(modules)。模块化 modeA, modeB,modeC
⑤getters:是state的计算属性。
怎么引用Vuex?
- 先安装依赖nnpm install vuex --save
- 在项目目录src中建立store文件夹
- 在store文件夹下新建index.js文件,写入import Vue from ‘vue’;
import Vuex from 'vuex';
Vue.use(Vuex);
//不是在生产环境debug为true
const debug = process.env.NODE_ENV !== 'production';
//创建Vuex实例对象
const store = new Vuex.Store({
strict:debug,//在不是生产环境下都开启严格模式
state:{
},
getters:{
},
mutations:{
},
actions:{
}
})
export default store;
然后再main.js文件中引入Vuex,这么写
import Vue from 'vue';
import App from './App.vue';
import store from './store';
const vm = new Vue({
store:store,
render: h => h(App)
}).$mount('#app')
state:存储数据,存储状态;在根实例中注册了store 后,用 this.$store.state 来访问;对应vue里面的data;存放数据方式为响应式,vue组件从store中读取数据,如数据发生变化,组件也会对应的更新。
action:
用来解决异步流程来改变state数据。
而matution是直接进行同步操作的,如果你在mutations里进行异步操作,你会发现没用,并不会起任何效果
只有通过action=>mutations=>states,这个流程进行操作,具体步骤如下:
export default new Vuex.Store({
//存放数据
state: {
count: 5,
},
//2.接受dispatch传递过来的方法和参数
actions: {
getParamSync (context,val) {
//处理异步操作
setTimeout(()=>{
//3.通过commit提交一个名为getParam的mutation
//action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation
context.commit('increment',val)
},3000)
}
}
})
vue组件中通过事件触发action
methods: {
getVal() {
//1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
this.$store.dispatch('getParamSync',1)
}
}
Mutations:
Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation
我们在 mutations中定义了一个叫increment的函数,函数体就是我们要进行更改的地方
会接受 state作为第一个参数,第二个是自定义传参
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数:5
},
mutations:{
increment(state,value){
state.count += value;
}
}
});
我们在提交commit时候,字符串参数increment,就是对应在 mutations中的increment。
一般通过方法或钩子触发,例如:
methods: {
getVal(event) {
//获取当前的按键的值
let value = event.target.dataset.value;
//通过commit提交一个名为increment的mutation
this.$store.commit(“increment”, value);
}
}
在组件中获取{{count}}方式:
export default {
computed: {
count(){
return this.$store.state.count;
}
}
};
1.increment官方说是type,其实就是注册的事件名
2.可以是单个参数
3.如果是多个参数,我们则用对象放入,否则会报错
Getters
可以认为,getters 是store的计算属性,类似于computed,对state里的数据进行一些过滤,改造等等
假设我们要在state.count的基础上派生出一个新的状态newCount出来,就适合使用我们的 getters
getters 接受 state 作为其第一个参数
const store = new Vuex.Store({
//state存储应用层的状态
state:{
count:5 //总数:5
},
getters:{
newCount:state => state.count * 3
}
});
在组件中获取{{newCount}}方式:
export default {
computed: {
newCount(){
return this.$store.getters.newCount;
}
}
};
组件中触发action、mutation
methods:{
jia(){
console.log(this.$store)
this.$store.commit("increment", 1);
},
jian(){
this.$store.commit('decrement',1)
},
twojia(){
this.$store.dispatch('getParamSync',1)
}
},
语法糖辅助函数
语法糖,四大金刚辅助函数:mapState,mapActions,mapMutations,mapGetters
当一个组件需要多个状态是,这些状态都声明成计算属性过于冗长。于是有了辅助函数
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
computed:{
...mapState({
a:"a", // "a" 指的是state中的a
b:"b"
}),
...mapGetters({
Val:'newVal' // 可以重新命名
})
}
methods:{
...mapActions({
getSync:'getSyncNum'
})
...mapMutations({
increament:"increament"
})
}
template
{{a}} {{b}}
{{getSync(1)}}
<button @click='increament(1)'></button>
modules 模块化管理数据
状态树结构复杂的时候,可以用modules进行管理。
多人协同开发,可以用modules,避免命名空间冲突。
//创建store,分模块定义
const test1 ={
namespaced:true, //开启命名空间,在各组件总 ...mapState("test1",{name:"name"})
state:{name:'test1'},
actions:{},
mutations:{
changeName(state,arg){
state.name=arg;
},
getters:{}
}
const test2 = {
namespaced:true,
state:{},
actions:{},
mutations:{
}
},
getters:{}
}
new Vuex.Store({
state:{name:"root"},
actions,
mutations,
getters
modules:{
test1,
test2
}
})
在组件中使用:
{{this.$store.state.name}}
{{name}}
{{this.$store.state.test1.name}}
{{tes1Name}}
computed:{
...mapState({
name:“name"
}),
...mapState('test',{
test1Name:'name'
})
}
methods:{
...mapMutations('test1',['changeName'])
}
备注
...mapState("test1',['name'])
...mapState('test1',{newName:'name'})
如果展开数组,组件中不可以重命名,
如果展开时对象,可以重命名