vuex的入门与使用讲解
官网：https://vuex.vuejs.org/zh/guide/state.html
定义：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
使用场景？
如果我们在项目中有很多状态需要管理，但是storage，cookie等一些常见的存储技术不足以管理的时候，这个时候你需要考虑是需要引进vuex了
几个重要概念： State, Mutation,Getter, Mutation, Action, Module
state: 状态的集中管理中心，本质上他就是一个对象，我们在里面定义了很多数据，使用的时候在组件的计算属性中将这个对象交给vue进行管理，实现数据的事实响应.....
1）简单例子
computed: {
count () {
return this.$store.state.count
},
age () {
return this.$store.state.age
},
name () {
return this.$store.state.name
}
}
2）mapSate: 状态太多，每一个申明很麻烦（例如上面），于是可以使用mapSate做处理，可以是数组，对象的形式
computed: {
...mapState({
count: 'count',
name (state) {
return state.name.toUpperCase()
},
age: 'age'
})
},
// 或者
computed: {
...mapState([
'count',
'name',
'age'
])
},
getter: 对state的统一处理，不需要每个组件中单独进行处理【em: 对state中的每个状态进行过滤的操作】，类似一种公共函数。
em:在state 中有一个状态为name：‘tom jackson’，默认小写字母
现在的要求是在每个组件的中展示的时候都name变成大写的字母，方法有很多种（过滤器等其他方式），可以在每个组件中进行单独处理，如下：
computed: {
...mapState({
count: 'count',
name (state) {
return state.name.toUpperCase(); //每个组件内部的自行处理
}
})
},
但是这里是使用getter进行操作怎么做呢？
1）首先在store中定义一个getters对象，进行需求处理
new Vuex.Store({
state: {
count:0,
name:'tomJack',
age:32,
phone: 13712553098
},
..........
..........
getters: { // 类似于一种被抽离出去的fun
upperName: state => {
return typeof (state.name) === 'string' ? state.name.toUpperCase() : '非字符串'
}
},
}）
2）mapGetters： 在使用组件中computed属性中，使用如下（mapGetters也可以是array, object形式）
computed: {
...mapState({
count: 'count',
name () {
return this.$store.getters.upperName
}
})
},
// 或者直接使用getters
computed: { // getters是state 的补充
...mapGetters({
name： ‘upperName’
})
},
截止目前为止以上都只是从store中被动的获取状态数据，还没尝试过组件内部修改store中的状态。
值得注意的是在vuex中是不允许直接修改store的状态值，例如一下操作是不被接受的
methods:{
increment () {
this.$store.state.age ++
}
}
我们须要提交mutation的方式进行修改操作。
mutation: 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation,类似于事件
mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：
1）在组件内部通过调用方法的形式this.$store.commit('xxx')，commit一个mutation 去触发handler
组件内部代码：
<button @click="addCount">增加count</button>
methods: {
addCount () {
this.$store.commit('increment',{n:2})
}
}
store.js
export default new Vuex.Store({
state: {
count:0,
},
mutations: {
increment (state, payload) {
state.count += payload.n
}
}
2）使用mapMutations辅助函数映射store.commit
组件内部：
<button @click="increment">减少count</button>
methods: {
...mapMutations([
'increment' // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
]),
值得注意的是：官方规定mutation 必须是同步函数，如果在mutation中存在异步回调函数中修改state值，那么状态的改变是不可追踪的 ，很难调试....... 因此我们需要一个集中处理异步操作的地方Action
Action: 类似于 mutation
不同点：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
举出一个简单例子：通过 store.dispatch 方法触发一个action
store.js
actions: {
decrementAsync ({ commit},{amount}) { // 与 store 实例具有相同方法和属性的 context 对象
setTimeout(() => {
commit('decrement'，{amount}) // mutation
},2000)
commit('decrement')
}
}
mutations: {
decrement (state, payload) {
state.count -= (payload && payload.amount? payload.amount: 1);
}
}
组件中的函数：
html: <button @click="decActionCount">减少count</button>
js: methods: {
decActionCount () {
this.$store.dispatch('decrementAsync',{amount:10})
}
}
使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
methods: {
...mapActions([
'decrementAsync'
]),
decrementAsynce () {
this.decrementAsync({amount:20})
},
目前为止基本上你已经掌握了vuex的基本使用方法。
思考一个问题，有的时候我们的状态会很多，多到我们想分模块进行处理，这个时候我们就需要用到Module？？？？
Module:将 store 分割成模块（module）,每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。
store.js
const moduleA = {
namespaced: true,
state : {
count:0,
name:'tomJack',
age:32,
phone: 13712553098
},
mutations: {
increment (state) {
state.count++
},
decrement (state, payload) {
state.count -= (payload && payload.amount? payload.amount: 1);
}
}
}
export default new Vuex.Store({
modules: {
a: moduleA
}
})
组件内部使用：
computed: {
...mapState('a' ,[// 带上模块名，如果是嵌套的则要嵌套表明 a/b/c
'count',
'name',
'age',
'upperName'
]),
...mapGetters('a',{ // 带上模块名，如果是嵌套的则要嵌套表明 a/b/c
name: 'upperName'
})
},
methods: {
...mapMutations('a',[ // 带上模块名，如果是嵌套的则要嵌套表明 a/b/c
'increment'
]),
...mapActions('a',[ // 带上模块名，如果是嵌套的则要嵌套表明 a/b/c
'decrementAsync'
]),
decrementAsynce () {
this.decrementAsync({amount:20})
},
addCount () {
this.$store.commit('a/increment')
}
表单处理：使用带有 setter 的双向绑定计算属性
严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会比较棘手,但是也不是不可能。。。
html:
<input type="text" v-model="phone" />
计算属性：
computed: {
phone: {
get () {
return this.$store.state.a.phone
},
set (val) {
this.$store.commit('a/updatePhone', {phone: val}) // module a
}
},
store.js
mutations: {
updatePhone (state, payload) {
state.phone = payload.phone
}