话不多说,基础开始
- 安装
cnpm install vuex
- 文件结构,推荐以下构建文件目录;当然了,结合工程可整合在一个文件,也可更细的拆分
---index.js
---getters.js
---mutations.js
---actions.js
注:一般情况在main.js中import store from './store'; store需要注入到new Vue({store})中
各个文件
---index.js
import Vue from 'vue';
import Vuex from 'vuex';
import * as getters from './getters';
import * as mutations from './mutations';
import * as actions from './actions';
Vue.use(Vuex);
export default new Vuex.Store({
state:{
info:{}//信息
}
getters,
mutations,
actions
})
---getters.js
export const info = state =>state.info;
---mutations.js
export const setInfo = (store,data) =>{
state.info = data;
}
---actions.js
export const setInfo = ({commit},data) =>{//setInfo是在组建中调用的名称
commit('setInfo',data);//setInfo必须和mutations.js的名称一样
}
---info.vue组件中使用
...
this.$store.commit("setInfo",{name:'vvmyly'});//执行mutations操作(同步)
...
...
this.$store.dispatch("setInfo",{name:'vvmyly'});//执行actions操作(异步)
...
-
偷懒的方法
小工程小测试的,在组建中直接修改store,甭管什么getters,mutations和actions了,直接就是this.$store.info = {name:'vvmily'}岂不快哉!!!这个写法会引起一些不必要的问题。
vuex状态管理基本用法就到这里了,大神勿喷...