vuex状态管理

[code]vuex优点
存缓存的话容易修改和暴露，vuex的话就没那么容易了
存缓存的话刷新浏览器缓存不会被重置，vuex会被重置
vuex用于组件之间的传值，localstorage，sessionstorage则主要用于不同页面之间的传值。
但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage无法做到

新建store/index.js

[code]npm install vuex --save

[code]import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex)
const Store = new Vuex.Store({
state:{
count:1
}
})
export default Store;

main.js

[code]import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index.js' //新增
Vue.use(VueScroller)

new Vue({
el: '#app',
router,
store,//新增
components: { App },
template: '<App/>'
})

子组件引用

[code]{{this.$store.state.count}}   //1

getters  在通过方法访问时，每次都会去进行调用，而不会缓存结果

和计算属性一样，getter 的返回值会根据它的依赖被缓存起来

且只有当它的依赖值发生了改变才会被重新计算。

[code] getters: {
//得到状态值
getCountAdd:state=>{
state.count = state.count+999;
},
},

子组件引用   

this.$store.getters.getCountAdd //  1+999

mutations（同步操作）

必须同步执行 actions可以异步操作

唯一方法是提交 mutation

你可以向 

store.commit

[code]store/index.js
// 不建议在mutations修改 建议在action修改
mutations:{
add(state,n){
state.count = state.count+n;
}
},
子组件
clickAdd:function(){
this.$store.commit("add",1)
},

分发actions（异步操作）

Action 提交的是 mutation，而不是直接变更状态。

Action 通过 

store.dispatch

[code]mutations:{
add(state,n){
state.count = state.count+n.count;
}
},
actions:{
addFun:function(context,n){
context.commit("add",n.count)
},
}
子组件引用

this.$store.dispatch("addFun",{
count：1
})//actions

module

引用： this.$store.state.moduleA.name

[code]moduleA.js
const moduleA = {
state:{
count:1
},
getters: {},
// 不建议在mutations修改 建议在action修改
mutations:{
addModule(state,n){
// state.count = state.count+n.count;
console.log("module 分组件引用")
}
},
actions:{
addModuleFun:function(context,n){
context.commit("addModule",n)
}
}
}
export default moduleA;

store/index.js

[code]import Vue from "vue";
import Vuex from "vuex";
import moduleA from "./moduleA.js";
Vue.use(Vuex)
const Store = new Vuex.Store({
state:{},
getters: {},
// 不建议在mutations修改 建议在action修改
mutations:{},
actions:{},
modules:{
moduleA:moduleA
}
})
export default Store;

子组件引用
console.log(this.$store.dispatch("addModuleFun",2))//actions
//打印 'module 分组件引用'

辅助函数

[code]import { mapGetters } from 'vuex'
//数组形式
//...mapGetters([
//'getCountAdd',
//'getCountAdd2'
//]),
//对象形式
...mapGetters({
getCountAdd:"getCountAdd",
getCountAdd2:"getCountAdd2"
})
//相当于 => this.$store.getters("getCountAdd")  this.$store.getters("getCountAdd2")

...mapState同理

[code]  ...mapState({
counts: state => console.log( "mapStateL:"+state.count)
}),

...mapMutations同理

...mapActions同理

[code]<button @click="addFun({count:123})">add</button>

[code]//store/index.js
import Vue from "vue";
import Vuex from "vuex";
import moduleA from "./moduleA.js";
Vue.use(Vuex)
const Store = new Vuex.Store({
state:{
count:1
},
getters: {},
// 不建议在mutations修改 建议在action修改
mutations:{
add(state,n){
state.count = state.count+n.count;
}
},
actions:{
addFun:function(context,n){
context.commit("add",n)
// context.commit("add",{count:1})
}
},
modules:{
moduleA:moduleA
}
})
export default Store;

子组件
methods:{
...mapActions({
addFun:"addFun",
}),
//this.$store.dispatch("addFun",{count：123})​​​​​​​
}

如果需要传值就用  事件绑定@的方式     或者this.$store.dispatch("addFun",{count：1})​​​​​​​

[code]//较完整的例子
import Vue from "vue";
import Vuex from "vuex";
import moduleA from "./moduleA.js";
import moduleB from "./moduleB.js";
Vue.use(Vuex)
const Store = new Vuex.Store({
state:{
count:1
},
getters: {
//得到状态值   只能通过 mutations 改变 state 的值
getCountAdd:(state)=>{
state.count = state.count+999;
console.log(state.count )
},
getCountAdd2:(state)=>{
state.count = state.count+1000;
console.log(state.count )
},
},
// 不建议在mutations修改 建议在action修改
mutations:{
add(state,n){
state.count = state.count+n.count;
},
remove(state,n){
state.count = state.count-n;
}
},
actions:{
addFun:function(context,n){
context.commit("add",{count:1})
context.commit("add",{count:1})
},
removeFun:function(context,n){
context.commit("remove",n)
}
},
modules:{
moduleA:moduleA,
moduleB
}
})
export default Store;