使用vueX的使用在搭建好vue开发环境的基础上使用 npm install vuex --save
VUEX使用示例先创建一个store文件,我在在里面分别创建mutation-type.js文件存放mutations的方法名
mutation-type.js文件具体代码
export const ADD_DATA="ADD_DATA";
export const REDUCE_DATA="REDUCE_DATA";
在创建store.js文件
在store.js里面引入VUEX插件和vue插件
具体代码:
import Vue from 'vue';//引入vue插件
import Vuex from 'vuex';//在引入vueX插件
import * as types from "./mutation-type";//引入mutation-type.js文件
Vue.use(Vuex);//注册vueX插件
const state={
count:0
}
const mutations={
[types.ADD_DATA] (state) {
//调用mutation-type里面的方法名,事实在这里就已经可以调用了在调用的组件页面用this.$store.commit("ADD_DATA")
//就可调用[types.ADD_DATA]方法
state.count++;
},
[types.REDUCE_DATA] (state) {
state.count --;
}
}
//vueX里面限制mutation 必须是同步的这一点
//vuex为了解决mutations只有同步的问题,提出了actions(异步),专门用来解决mutations只有同步无异步的问题.
const actions={
add({commit}){
commit(types.ADD_DATA);
},
reduce ({commit}) {
commit(types.REDUCE_DATA);
}
}
export default new Vuex.Store({
state,
mutations,
actions
})
//actions的触发方法需要dispach方法来触发
具体的调用方法在使用的组件中使用this.$store.dispatch('add')调用add方法来使count++改变值。
actions里面的commit()方法里面不能这样写commit([types.REDUCE_DATA]);这样写会报错的。
export default new Vuex.Store({
state,
mutations,
actions
})
还有mutations, //这里不能这样写mutation这样写会报错s不能少
但是可以这样写:
Vue组件调用方法:
//vue组件调用方法一,方法一需引入import {mapActions} from 'vuex'
...mapActions({
StoreClick: 'add'
}),
//vue组件调用方法二
StoreClick(){
this.$store.dispatch("reduce");
this.mathNum=this.$store.state.count;
},
个人创建的微信公众号: 憨逗IT