1.介绍
首先Vuex是Vue的核心插件(还没了解vue的可以到 vue官网 学习下),所以使用VueX之前必须有Vue,是用来集中存储组件状态(也就是数据).我们需要搞清楚一点项目中是不是真的需要用vuex,不要为了使用vuex而使用vuex
2.基础使用及注册
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
npm
npm install vuex --save
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex);
//gitHub dome查看
const moduleA = {
state: { count: 100 },
mutations: {
increment (state) {
// 这里的 `state` 对象是模块的局部状态
state.count++
}
},
getters: {
doubleCount (state, getters, rootState) {
return state.count * 2 +rootState.count;
}
}
};
export default new Vuex.Store({
state(){ //存放数据
return { //防止污染
count: 0,
str: 'cas'
}
},
getters:{ //state的计算属性
doneTodos: state => {
return state.str+'C';
}
},
mutations:{ //同步
/**
* @param state state中注册值
* @paramList 自行添加至
*/
increment(state){
state.count++
},
increment1(state){
state.count++
},
},
actions:{ //异步 (调用接口)
increment(context){
context.commit('increment');
},
increment1({commit}){
console.log(commit)
commit('increment1');
}
},
modules:{ //模块的局部状态 可以按模块组件划分
a:moduleA,
account: {
namespaced: true,
//允许子模型对应方法注册再自己的路径下,防止vuex中有同名的方法 调用一起触发
// this.$store.dispatch('account/login')
// this.$store.dispatch('account/login1')
// this.$store.dispatch('account/posts/login2')
state: {
account:'account'
}, // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响
actions: {
login ({ state, commit, rootState }) {
commit('login')
}
},
mutations: {
login (state) {
console.log('account'+state.account)
},
incrementcccc () {
console.log('accountincrement')
}
},
// 嵌套模块
modules: {
// 继承父模块的命名空间
myPage: {
state: {
dome1:'21',
},
actions: {
login1 ({ state, commit, rootState }) {
commit('login1')
}
},
mutations: {
login1 (state) {
console.log('myPage'+state.dome1)
},
},
},
// 进一步嵌套命名空间
posts: {
namespaced: true,
state: {
dome1:'21',
dome2:'22',
},
actions: {
login2 ({ state, commit, rootState }) {
commit('login2');
commit('account/incrementcccc',null,{root:true}) //root用来掉用别的模块的方法
}
},
mutations: {
login2 (state) {
console.log('posts'+state.dome1)
},
},
},
foo: {
namespaced: true,
actions: {
someAction: {
root: true, //可以注册全局的无视路径调用
handler (namespacedContext, payload) {
console.log('外部调用')
} // -> 'someAction'
}
}
}
}
}
}
})
上面是我随便写的store文件,我先使用webpack搭建了个项目,然后使用 import导入 new Vuex.store创建vuex,然后到new Vue 的store里注册.这里我把store单独提到了一个文件里,通过export defaut讲整个Vuex.store抛出去,然后import到main.js注册,这样可以防止mian代码过多,各个功能模块之间解耦合.
3.state
用来存储数据的就像vue中的data,这里有个小点就是不要state:{}里直接写对象最好return{},防止数据被随意或不小心修改而污染
state(){ //存放数据
return { //防止污染
count: 0,
str: 'cas'
}
},
mapState
辅助函数
state中有个辅助函数,是将state中的对象映射的vue的计算属性中,有人会问mapState怎么来,这个vuex已经暴露出来了 我们只需要 import {mapState} from 'vuex'
computed:{
computeddeom1:function () {
return this.deom1+3;
},
...mapState({ //计算数据可以直接调用 vuex state 中数据
count:state => state.count,
conutAlias :'count',
}),
//同个模块下多个相同的
...mapState({
a:state => state.account.posts.dome1,
d:state => state.account.posts.dome2,
}),
...mapState('account/posts',{
b:state => state.dome1,
c:state => state.dome2,
})
},
4.getter
getter其实也很简单就想到与vue的computed计算属性,this.$store.getters.doneTodos调用
getters:{ //state的计算属性
doneTodos: state => {
return state.str+'C';
}
},
mapGetters
辅助函数和mapState一样就是一个映射的是Getter,这里我就不讲了
5.mutation
mutation是用来改变store中数据值得唯一方式,而且mutation中只能执行同步操作不能执行异步
mutations:{ //同步
/**
* @param state state中注册值
* @paramList 自行添加至
*/
increment(state){
state.count++
},
increment1(state,data,...){
state.count++
},
},
this.$store.commit('increment')
如果有多个参数就
this.$store.commit('increment',a,b,....)
6.action
action是用来提交mutation,不是直接改变store值得,就类似于代理设计模式,就是在mutation方法上包装增强一下,而且action中是可以做异步操作的.
actions:{ //异步 (调用接口)
increment(context){
context.commit('increment');
},
increment1({commit}){
console.log(commit)
commit('increment1');
}
},
this.$store.dispatch('increment') 调用
mapActions
辅助函数
mapAction和mapGetter mapState原理一样就是先将action中方法映射到 vue 的 methods中
这段是官网代码
import { mapActions } from 'vuex'
export default {
// ...
methods: {
...mapActions([
'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// `mapActions` 也支持载荷:
'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
]),
...mapActions({
add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
})
}
}
7.module
module就是一个 state,getter,mutation,action,module的总和,对于轻型项目没必要使用module,把所有的状态都写到state中就行了
大型或逻辑复杂的项目模块组件多,如果都写在store下的state中的话会变得相当臃肿,耦合性强,不便于后期迭代和维护
modules:{ //模块的局部状态 可以按模块组件划分
a:moduleA,
account: {
namespaced: true,
//允许子模型对应方法注册再自己的路径下,防止vuex中有同名的方法 调用一起触发
// this.$store.dispatch('account/login')
// this.$store.dispatch('account/login1')
// this.$store.dispatch('account/posts/login2')
state: {
account:'account'
}, // 模块内的状态已经是嵌套的了,使用 `namespaced` 属性不会对其产生影响
actions: {
login ({ state, commit, rootState }) {
commit('login')
}
},
mutations: {
login (state) {
console.log('account'+state.account)
},
incrementcccc () {
console.log('accountincrement')
}
},
// 嵌套模块
modules: {
// 继承父模块的命名空间
myPage: {
state: {
dome1:'21',
},
actions: {
login1 ({ state, commit, rootState }) {
commit('login1')
}
},
mutations: {
login1 (state) {
console.log('myPage'+state.dome1)
},
},
},
// 进一步嵌套命名空间
posts: {
namespaced: true,
state: {
dome1:'21',
dome2:'22',
},
actions: {
login2 ({ state, commit, rootState }) {
commit('login2');
commit('account/incrementcccc',null,{root:true}) //root用来掉用别的模块的方法
}
},
mutations: {
login2 (state) {
console.log('posts'+state.dome1)
},
},
},
foo: {
namespaced: true,
actions: {
someAction: {
root: true, //可以注册全局的无视路径调用
handler (namespacedContext, payload) {
console.log('外部调用')
} // -> 'someAction'
}
}
}
}
}
}
module可以直接account:{} 也 可以import 对象 a:module
这里我建议第二张这种每个模块的module都在一个单独的js里这种代码会简洁易读
命名空间
namespaced: true,
允许子模型对应方法注册再自己的路径下,防止vuex中有同名的方法 调用一起触发
在带命名空间的模块内容访问全局内容
简单的说就是调用不懂module中的方法和值
commit('account/incrementcccc',null,{root:true})
posts: {
namespaced: true,
state: {
dome1:'21',
dome2:'22',
},
actions: {
login2 ({ state, commit, rootState }) {
commit('login2');
commit('account/incrementcccc',null,{root:true}) //root用来掉用别的模块的方法
}
},
mutations: {
login2 (state) {
console.log('posts'+state.dome1)
},
},
},
foo: {
namespaced: true,
actions: {
someAction: {
root: true, //可以注册全局的无视路径调用
handler (namespacedContext, payload) {
console.log('外部调用')
} // -> 'someAction'
}
}
}
带命名空间的绑定函数
就是使用辅助函数按对应模块映射
computed:{
computeddeom1:function () {
return this.deom1+3;
},
...mapState({ //计算数据可以直接调用 vuex state 中数据
count:state => state.count,
conutAlias :'count',
}),
//同个模块下多个相同的
...mapState({
a:state => state.account.posts.dome1,
d:state => state.account.posts.dome2,
}),
...mapState('account/posts',{
b:state => state.dome1,
c:state => state.dome2,
})
},
也可以通过createNamespacedHelpers创建对应模块的命名函数
/**
* createNamespacedHelpers 带命名空间的绑定函数
*/
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapActions } = createNamespacedHelpers('account/posts')
export default {
// 在 `some/nested/module` 中查找
...mapState({
a: state => state.dome1,
b: state => state.dome2
})
}
模块动态注册
// 注册模块 `myModule` (动态加载管理) vuex-router-sync
//store.unregisterModule(moduleName) 注销
//store.registerModule('a', module, { preserveState: true }) preserveState 是否让浏览器保存
store.registerModule('myModule', {
state: {
data1:'registerModule1',
},
})
store.registerModule(['myModule', 'nested'], {
state: {
data1:'registerModule2',
},
})
console.log(this.$store.state.myModule.data1+'-registerModule')
console.log(this.$store.state.myModule.nested.data1+'-registerModule')