什么是vuex?官方的解释是这样的。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
这种状态管理库的出发点都是为了维护庞大不可控的状态。
安装
cnpm install vuex --save
新建store文件并且引入vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
然后在main.js中挂载
然后就可以正式写业务啦。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
// 要设置全局访问的state对象
state: {
userName: "",
token: "",
count: 0
},
// 对state中的数据进行操作
mutations: {
addCount(state, num) {
state.count += num;
},
resetCount(state) {
state.count = 0
},
setToken(state, data) {
state.token = data
}
},
// 获取数据
getters: {
getUserName(state) {
return state.userName;
},
getToken(state) {
return state.token;
},
getCount(state) {
return state.count
}
},
// 异步操作
actions: {
getToken(context) {
return new Promise((resolve) => {
setTimeout(() => {
context.commit('setToken', '123')
resolve("111")
}, 1000);
})
},
}
})
在页面中获取一个变量,可以通过这两种方式
var token=this.$store.state.token
var token2=this.$store.getters.getToken
也可以在页面中通过mapstate的方式引入到本页面中,引入以后就可以当作本页面的参数使用了
而修改state不能直接修改,而是通过这种commit方法修改
this.$store.commit('addCount',5)
而调用action的方法需要使用dispatch
this.$store.dispatch('方法名',值)
上面就是简单的使用方法了,但是一旦项目大了起来,那样文件会变的巨大不方便管理,所以这里介绍怎么使用modules动态导入文件
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules,
getters
})
export default store
模块中代码的写法
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default {
namespaced: true,
// 要设置全局访问的state对象
state: {
userName: "",
token: "",
count: 0
},
// 对state中的数据进行操作
mutations: {
addCount(state, num) {
state.count += num;
},
resetCount(state) {
state.count = 0
},
setToken(state, data) {
state.token = data
}
},
// 异步操作
actions: {
getToken(context) {
return new Promise((resolve) => {
setTimeout(() => {
context.commit('setToken', '123')
resolve("111")
}, 1000);
})
},
}
}
而通过模块引入的话,使用方法需要加上模块名
this.$store.commit('user/addCount',5)
console.log(this.$store.state.user.count)
如这样
而通过mapState引入也需要做类似处理
...mapState('user',['token','userName','count'])
而使用的时候就不再需要再添加模块名称了
console.log(this.token)