vue状态管理之vuex
vue状态管理之vuex
VUEX学习笔记
vuex和单纯的全局对象有两点不同：
- vuex的状态存储是响应式的：store中的状态发生变化响应的组件也会发生变化。
- 不能直接改变store中的状态：只能通过commit mutation 改变。
vuex的使用
- 安装
npm install vuex --save - 使用：确保全局下载过Vue,并且引用,
import vuex from 'vuex'Vue.use(vuex)
- 创建第一个store
let store = new store({state:{count:0},mutation:{increment(state){state.count++}}})
4.在页面上显示数据，state(辅助函数mapState),mutation(辅助函数mapMutation),getters(辅助函数mapGetters)
第一步，创建store.js
“`
import Vue from ‘vue’
import vuex from ‘vuex’
Vue.use(vuex);
let store = new vuex.Store({
state:{
count:0,
todos:[
{id:1,text:’第一条todo’,done:true},
{id:2,text:’第二条todo’,done:false},
]
},
getters:{
todoDone(state){
return state.todo.filter(todo =>todo.done)
}
},
mutations:{
increment (state,payload) {
state.count += payload.amount
},
decrement(state,payload){
state.count -= payload.amount
}
},
actions:{
increment(context,payload){
debugger
console.log(context,payload);
context.commit(‘increment’,payload)
},
//还可以以解构赋值的方式来显示参数，直接拿到commit方法，不用context.commit
decrement({commit},payload){
commit(‘decrement’,payload)
}
}
});
export default store;
第二步，将store挂载到vue中，这样vue根实例及其每个子组件都可以直接使用store
import store from ‘./store.js’
new Vue({
el: ‘#app’,
store,
render: h => h(App)
})
第三步，在App.vue文件中显示，并且加减数据。
{{$store.state.count}}-{{count1}}
<button @click=”submit”>增加
<button @click=”reduce”>减少
<li v-for=’item in todo’ :key=”item.id”>
{{item.id}}
{{item.text}}
{{item.done}}
5. module使用方法：当store对象变得非常大，非常臃肿的时候，这时候可以使用modules来分割成模块，方便管理与维护* 第一种：直接在一个store.js文件中写入好几个对象，然后在modules中注册。
const moduleA = {
state: { … },
mutations: { … },
actions: { … },
getters: { … }
}
const moduleB = {
state: { … },
mutations: { … },
actions: { … }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
* 第二种方法：没个模块可以写在一个js文件中，然后倒入到store.js中首先moduleA.js文件：
export let moduleA = {
state:{
numA:10
},
mutations:{},
actions:{},
getters:{}
}其次moduleB.js文件中：
let moduleB = {
state:{
numB:10
},
mutations:{},
actions:{},
getters:{}
}
export default moduleB;
然后在store.js中统一导入就可以使用了：
import {moduleA as a}from ‘./moduleA.js’
import moduleB from ‘./moduleB.js’
console.log(a)
let store = new vuex.Store({
…
modules:{
a:a,
b:moduleB
}
})##### 这里稍微简单总结一下：export和export default的使用区别 * export 可以倒出一赋值语句，如：export let moduleA = {}，但是在导入的时候变量名得用{}包起来，如：import {moduleA as a}from ‘./moduleA.js’,也可以重命名. * export default 一个对象的时候可以先定义对象let moduleB = {}，然后export default moduleB;;或者 export default {}就行，然后导入的时候命名import moduleB from ‘./moduleB.js’“`