vuex之state、Mutations、getters、actions、modules Vue

state
1.文件创建
当然，文件创建的位置自己可以定，本文例子都在src文件夹下进行创建。
main.js

import Vue from 'vue' import store from './store' import vuex_test from './vuex_test.vue'new Vue({ el:'#app', store, render:xx=>xx(vuex_test) })

vuex_test.vue

store.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)// 访问状态对象 const state = { count:0 }export default new Vuex.Store({ state})

最基本的用法{{$store.state.count}}引用，显示结果：

vuex之state、Mutations、getters、actions、modules

文章图片

其他方式引用1：
vuex_test.vue中添加：

computed : { count(){ return this.$store.state.count+2 } }

哦豁，报错了，让我们看下错误：

vue.esm.js?c5de:628 [Vue warn]: The computed property "count" is already defined in data. found in --->at src/vuex_test.vue

文章图片

然后我百度了下原因：
Vue binds all properties in the data method to the root of the instance. It also does this for computed properties, and methods, so you must use different names to avoid naming conflicts.
The main problem in the code you posted is that you have naming conflicts with every data property. In fact, because you are using a Vuex store, you don’t need the data properties at all, just the computed properties.
翻译过来是：
VUE将数据方法中的所有属性绑定到实例的根。它还对计算的属性和方法执行此操作，因此您必须使用不同的名称来避免命名冲突。
您发布的代码中的主要问题是，您与每个数据属性都存在命名冲突。实际上，因为您使用的是Vuex存储，所以根本不需要数据属性，只需要计算的属性。
大概意思就是data中的count和computed中的count命名冲突了，咱们只用到计算属性了，所以data中去掉，他出现的本地也只是为了给｛｛count｝｝赋初值而已。
去掉后，看结果：

文章图片

其他方式引用2：
vuex_test.vue中添加：

computed:mapState({ // count:state => state.count count:function (state) { return state.count } })

另外记得引用mapState

import { mapState } from 'vuex'

文章图片

剩下一种其实类似于上面，适应于只显示不变更数据的情况：

//辅助函数，映射this.count到$stote.state.count // computed:mapState([ //"count" // ]),computed: { ...mapState([ 'count' ]) }

注意上面第一种为直接数组的格式，第二种为标准语法，三个点去掉就报错滴

文章图片

这就是获取store中的state数据并显示的几种情况，切记，多个computed时只有一个会生效，默认最后一个生效，本文例子记得将原来的覆盖或者注释掉
接下来便是Mutations触发状态的用法：
store.js文件中规定Mutations中几种规则并下方调用

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)// 访问状态对象 const state = { count:0 }// 访问触发状态 const mutations = { addNumberByNumbert(state,n){ state.count += n; }, addNumberByObject(state,obj){ state.count += (obj.a+obj.b); }, addNumber(){ state.count ++; }, delNumber(state){ state.count --; } }export default new Vuex.Store({ state, mutations})

vuex_test.vue中进行修改：

运行结果：

文章图片

getters的用法：
store.js中修改添加：

const getters = { count:function(state){ return state.count += 100 } }export default new Vuex.Store({ state, mutations, getters})

vuex_test.vue中进行修改：

运行结果：

文章图片

action异步加载：
store.js中添加： getters中暂且设置为0

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)// 访问状态对象 const state = { count:0 }// 访问触发状态 const mutations = { addNumberByNumbert(state,n){ state.count += n; }, addNumberByObject(state,obj){ state.count += (obj.a+obj.b); }, addNumber(){ state.count ++; }, delNumber(state){ state.count --; } }const getters = { count:function(state){ return state.count += 0 } }const actions = { addNumberP(context){ context.commit('addNumberByObject',{a:5,b:10}), setTimeout(() =>{ context.commit('delNumber') },3000) console.log("本条语句先与计时器被执行") }, delNumberP({commit}){ commit('delNumber') } }export default new Vuex.Store({ state, mutations, getters, actions})

vuex_test.vue中进行修改：

文章图片

执行结果：
先计数成为15，然后执行log输出，最后count-1变成14

文章图片

附完整代码：
store.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)// 访问状态对象 const state = { count:0 }// 访问触发状态 const mutations = { addNumberByNumbert(state,n){ state.count += n; }, addNumberByObject(state,obj){ state.count += (obj.a+obj.b); }, addNumber(){ state.count ++; }, delNumber(state){ state.count --; } }const getters = { count:function(state){ return state.count += 0 } }const actions = { addNumberP(context){ context.commit('addNumberByObject',{a:5,b:10}), setTimeout(() =>{ context.commit('delNumber') },3000) console.log("本条语句先与计时器被执行"+new Date()) }, delNumberP({commit}){ commit('delNumber') } }export default new Vuex.Store({ state, mutations, getters, actions})

vuex_test.vue

模版的简单用法：