在运用vuex的前提是必须对vue有一定的认识.以及vue-router的简单使用本篇文章在上文的基础上对vuex做一个简单使用的小案例。
介绍
首先需要了解的就是vuex状态管理机，实际上相当于一个store仓库，这个仓库放置的时一些需要在多个场合被调用的一些状态（state），也就是相当于一些共享属性，并且vuex的状态存储是响应式的，就是说如果store中的状态state发生改变，这个改变会动态体现在你调用这个state的组件中；另一个就是你不能够直接去改变store中的状态，唯一的办法就是通过提交突变（mutation），这样有利于我们跟踪每一个状态的改变，从而更加了解我们的应用。
下面让我一起来使用它：
1.安装
你需要下载vuexnpm install vuex --save
<script src="./vuex.min.js"></script>
或者直接通过cdn来引用它
<script src="https://cdn.bootcdn.net/ajax/libs/vuex/0.4.1/vuex.min.js"></script>
注意:vuex是基于promise的,有的浏览器不支持promise(如IE),那么你直接换一个浏览器如Google或者firefox.
如果你使用vue-cli已经搭建一个框架,那么你还需要显示声明它
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
2.创建一个仓库store
// 新建一个仓库
// 实例化vuex
var store = new Vuex.Store({
// 存储共享的数据 // 状态机
state:{
a：{}
},
// 获取数据
getters:{
},
// 突变
mutations:{
// 同步修改数据
resetA(state,a){
state.a = a;
}
},
// 动作
actions:{
// 异步操作
findA(context,data){
//在执行findA的时候可以通过data传参
// 进行异步操作，并且将返回的结果通过赋值给a
//context是上下文的意思，和store一样，但又不是store，通过commit()进行提交突变，改变a的值
context.commit('resetA',a);
}
}
})
简单粗暴直接创建完之后,现在，你可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更：
store.commit('increment')
console.log(store.state.count) // -> 1
**注意:**触发状态变更的操作应当在actions当中
3.如果你想要在vue实例当中访问store你需要在vue实例当中注入store,并且使用this.$store来访问他们的property
new Vue({
el: '#app',
//注入store
store: store,
})
4.我们可以在提交一个变更在actions当中
methods: {
increment() {
this.$store.commit('increment')
console.log(this.$store.state.count)
}
}
5.我们最终还是要做一个异步操作的,以前在vue实例当中我们直接在methods当中实现就行,如:
methods:{
login(){
},
logout(){
}
},
而现在我们的异步操作放在actions当中,那么我们应该怎么让他去执行呢?
这个时候就需要我们的this.$store.dispatch()方法去分发这个异步操作,让他执行,而把它放在vue实例当中的methods中的方法中就可以像以前那样绑定给一个事件就可以执行了。
methods:{
login(){
this.$store.dispatch("login",this.list).then((res)=>{
})
},
logout(){
}
},
6.有时我们需要对store中state中的数据进行操作，如数据a
computed:{
a(){
return this.$store.state.a;
}
},
或者你可以通过getters拿到
computed:{
newA(){
return this.$store.getters.newA;
}
},
我们还可以通过状态机的辅助函数获取
使用这种方式就会非常简单
使用辅助函数的后会完全脱离对this.$store的操作
//需要把mapState从vuex中解构出来
import { mapState } from 'vuex'
computed: {
...mapState(["a"])
// 映射 this.a 为 store.state.a
}
对于getters和actions和state类似，
通过mapGetters和mapActions这两个辅助函数实现。
不同的是mapActions写在方法中即methods。
通过this.方法名直接调用，而不是通过this.$store.dispatch进行调用。