vuex的作用是在vue的项目中方便与页面与页面之间值的传递。
一. 安装vuex，使用命令
npm install vuex --save
二. 引入vuex
在项目src文件夹中创建一个目录store，在该目录下新建一个index.js文件，我们用来创建vuex实例，然后在该文件中引入vue和vuex，创建Vuex.Store实例保存到变量store中，最后使用export default导出store：
import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex
//使用vuex
Vue.ues(Vuex);
//创建vuex实例
const store = new Vuex.store({
})
export default store
三. 在主文件添加上面创建的文件
在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象
State
vuex中的数据源，我们需要保存的数据就保存在store/index.js，可以在页面通过 this.$store.state来获取我们定义的数据；
import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex
//使用vuex
Vue.ues(Vuex);
//创建vuex实例
const store = new Vuex.store({
state: {
count: 1
}
})
export default store
Getters:
Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果。
vue文件内容：
<div>我是从页面上直接获得的： {{this.$store.state.count}}</div>
<div>我是从getter获取的计算的值： {{this.$store.getters.getStateCount}}</div>
store/index.js文件如下：
import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex
//使用vuex
Vue.ues(Vuex);
//创建vuex实例
const store = new Vuex.store({
state: {
count: 1
},
getters: {
getStateCount: function(state) { //为上面的state
return state.count ++;
}
}
})
export default store
Mutations:
如果需要修改store中的值唯一的方法就是提交mutation来修改，我们现在Hello World.vue文件中添加两个按钮，一个加1，一个减1；这里我们点击按钮调用addFun（执行加的方法）和reductionFun（执行减法的方法），然后在里面直接提交mutations中的方法修改值：
<div>count的值： {{this.$store.state.count}}</div>
<button @click="addFun">加</button>
<button @click="reductionFun">减</button>
<script>
export default {
name: "HelloWorld",
data() {
return {}
},
methods: {
addFun() {
this.$store.commit("add");
},
reductionFun() {
this.$store.commit("reduction");
}
}
}
</script>
在store/index.js文件中，添加mutations，并定义两个函数add和reduction
import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex
//使用vuex
Vue.ues(Vuex);
//创建vuex实例
const store = new Vuex.store({
state: {
count: 1
},
getters: {
getStateCount: function(state) { //为上面的state
return state.count ++;
}
},
mutations: {
add(state) {
state.count ++;
},
reduction(state) {
state.count --;
},
}
})
export default store
Actions:
我们看到，当点击三次后值从2变成了-1；页面上的值是改变了；我们达到了修改store中状态值的目的，但是，官方并不介意我们这样直接去修改store里面的值，而是让我们去提交一个actions，在actions中提交mutation再去修改状态值，接下来我们修改index.js文件，先定义actions提交mutation的函数：
import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex
//使用vuex
Vue.ues(Vuex);
//创建vuex实例
const store = new Vuex.store({
state: {
count: 1
},
getters: {
getStateCount: function(state) { //为上面的state
return state.count ++;
}
},
mutations: {
add(state) {
state.count ++;
},
reduction(state) {
state.count --;
},
},
actions: { //注册actions，类似vue中的methods
addFun(context) { //接受一个与store实例具有相同方法的属性的context对象
context.commit("add");
},
reductionFun(context) {
context.commit("reduction");
},
}
})
export default store
然后我们去修改Hello World.vue文件
<div>count的值： {{this.$store.state.count}}</div>
<button @click="addFun">加</button>
<button @click="reductionFun">减</button>
<script>
export default {
name: "HelloWorld",
data() {
return {}
},
methods: {
addFun() {
//this.$store.commit("add");
this.$store.dispatch("addFun");
},
reductionFun() {
//this.$store.commit("reduction");
this.$store.dispatch("reductionFun");
}
}
}
</script>
如果我们需要指定加减的数值，那么我们直接传入dispatch中的第二个参数，然后在actions中的对应函数中接受参数在传递给mutations中的函数进行计算：
<div>count的值： {{this.$store.state.count}}</div>
<button @click="addFun">加</button>
<button @click="reductionFun">减</button>
<script>
export default {
name: "HelloWorld",
data() {
return {}
},
methods: {
addFun() {
//this.$store.commit("add");
this.$store.dispatch("addFun");
},
reductionFun() {
var n = 10
//this.$store.commit("reduction");
this.$store.dispatch("reductionFun", n);
}
}
}
</script>
store/index.js修改如下
import Vue from "vue"; //引入vue
import Vuex from "vuex"; //引入vuex
//使用vuex
Vue.ues(Vuex);
//创建vuex实例
const store = new Vuex.store({
state: {
count: 1
},
getters: {
getStateCount: function(state) { //为上面的state
return state.count ++;
}
},
mutations: {
add(state) {
state.count ++;
},
reduction(state, n) {
//state.count --;
state.count = state.count - n; //传入需要减掉的值
},
},
actions: { //注册actions，类似vue中的methods
addFun(context) { //接受一个与store实例具有相同方法的属性的context对象
context.commit("add");
},
reductionFun(context, n) {
context.commit("reduction", n);
},
}
})
export default store
mapState、mapGetters、mapActions
如果我们不喜欢这种在页面上使用“this.store.dispatch('funName')”这种很长的写法，那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了；
网友评论