一、state
state是什么?
定义:state(vuex) ≈ data (vue)
vuex的state和vue的data有很多相似之处,都是用于存储一些数据,或者说状态值.这些值都将被挂载 数据和dom的双向绑定事件,也就是当你改变值的时候可以触发dom的更新.
虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.如果你用data去接收$store.state,当然可以接收到值,但由于这只是一个简单的赋值操作,因此state中的状态改变的时候不能被vue中的data监听到,当然你也可以通过watch $store去解决这个问题,那你可以针是一个杠精
综上所述,请用computed去接收state,如下
//state.jslet state = {count: 1,name: 'dkr',sex: '男',from: 'china'}export default state<template><div id="example"><button @click="decrement">-</button>{{count}}{{dataCount}}<button @click="increment">+</button></div></template><script>export default {data () {return {dataCount: this.$store.state.count //用data接收}},computed:{count(){return this.$store.state.count //用computed接收}}methods: {increment () {this.$store.commit('increment')},decrement () {this.$store.commit('decrement')}}}</script>
二、mapstate辅助函数
mapState是什么” /> 
实际作用:当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键
在使用mapState之前,要导入这个辅助函数
import { mapState } from 'vuex'store.js
// store.js/**vuex的核心管理对象模块:store */import Vue from 'vue';import Vuex from 'vuex';import vuexTest from './modules/vuexTest';Vue.use(Vuex)// 状态对象const state = { // 初始化状态 这里放置的状态可以被多个组件共享count: 1,count1: 1,count2: 2,count3: 3,name: 'daming'};const mutations = {};const actions = {};const getters = {};export default new Vuex.Store({state, // 状态mutations, // 包含多个更新state函数的对象actions, // 包含多个队形事件回调函数的对象getters, // 包含多个getter计算属性函数的对象modules: { // 模块化vuexTest}});1、在界面或组件中不使用mapState获取vuex中state的状态
虽然将所有的状态放入Vuex，会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。如果有些状态严格属于单个组件，最好还是作为组件的局部状态，比如temp变量,hello, number作为组件的局部状态。
<!-- test.vue --><template><div id="example">{{count}}{{name}}{{helloName}}{{addNumber}}</div></template><script>export default {data() {return {hello: 'hello',number: 1,}},computed: {// 由于 Vuex 的状态存储是响应式的，所以可以使用计算属性来获得某个状态// 通过下面的计算属性，就可以在当前组件中访问到count,name，helloName，addNumber 在模板中我们通过大括号符号打印出来，当然这些可以在vue中使用，比如在watch中监听，在mounted中使用// 下面的计算属性涉及到了vuex管理的状态count() { // 这实际上是ES6中对象的简化写法 完整写法是 count: function { return this.$store.state.count }return this.$store.state.count},name() { // 这实际上是ES6中对象的简化写法 完整写法是 name: function { return this.$store.state.count }return this.$store.state.count},helloName: function (state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数return this.hello + this.$store.state.name},addNumber: function (state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数return this.number + this.$store.state.count}// 但有一个问题// 当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。比如上面的name(),count(),helloName(),显得重复，代码冗长// 为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：},watch: { helloName(newVal,oldVal){ console.log(newVal); console.log(oldVal); } },mounted(){console.log(this.helloName);}}</script>2、在组件、界面中使用mapState获取vuex中state的数据
<!-- test.vue --><template><div id="example">{{count}}{{count1}}{{repeatCount}}{{count3}}{{name}}{{helloName}}{{addNumber}}</div></template><script>export default {data() {return {hello: 'hello',number: 1,count2: 2}},computed: {/** * 数组形式 * 当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。 * */...mapState(["count", "name"]),/** * 对象形式 */...mapState({count, // 这种就是count:"count", 的简写count1: "count1",repeatCount: "count2", // 当组件中与vuex中的字符已经出现重复时，使用 repeatCount 来映射 store.state.count2count3: (state) => { // 映射 count3 为 store.state.conut3的值return state.count3},helloName: function (state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数return this.hello + state.name},addNumber: function (state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数return this.number + state.count}})},watch: {helloName(newVal, oldVal) {console.log(newVal);console.log(oldVal);}},mounted() {console.log(this.helloName);}}</script>3、modules的vuexTest模块中state数据
/** * vuexTest.js * modules 中的数据 */export default {namespaced: true,state: {moduleVal: 1,moduleName: "战战兢兢"},getters: {},mutations: {},actions: {}}4、在界面或组件中不使用mapState获取模块modules vuexTest中state的状态
<!-- module test.vue --><template><div id="example">{{moduleVal}}{{moduleName}}{{moduleNameOther}}</div></template><script>export default {data() {return {hello: 'hello',number: 1,}},computed: {moduleVal(){return this.$store.state.vuexTest.moduleVal},moduleName(){return this.$store.state.vuexTest.moduleVal},moduleNameOther(){// 当组件中与vuex中的字符已经出现重复时，使用 moduleNameOther 来映射 store.state.vuexTest.moduleNamereturn this.$store.state.vuexTest.moduleVal },},watch: {helloName(newVal, oldVal) {console.log(newVal);console.log(oldVal);}},mounted() {console.log(this.addNumber);}}</script>5、在界面或组件中使用mapState获取模块modules vuexTest中state的状态
<!-- module test.vue --><template><div id="example">{{moduleVal}}{{moduleName}}{{moduleNameOther}}</div></template><script>import { mapState } from 'vuex'export default {data() {return {hello: 'hello',number: 1,}},computed: {/** * 数组形式 * 当映射的计算属性的名称与 与模块中vuexTest中state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组， * */...mapState("vuexTest", ["moduleVal", "moduleName"]),// "vuexTest" 指向模块vuexTest，"moduleVal"表示store.vuexTest.moduleVal/** * 对象形式 */// 第一种对象方式...mapState({moduleVal: "vuexTest/moduleVal",moduleNameOther: "vuexTest/moduleName" // 表示 moduleNameOther 映射到vuexTest模块中moduleName}),...mapState("vuexTest", {moduleVal, // 这种就是moduleVal:"moduleVal", 的简写moduleName: "moduleName",moduleNameOther: "moduleName", // 当组件中与vuex中的字符已经出现重复时，使用 moduleNameOther 来映射 store.state.vuexTest.moduleNamemoduleVal: (state) => { // 映射 moduleVal 为 store.state.vuexTest.moduleVal的值return state.moduleVal},helloName: function (state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数return this.hello + state.moduleName},addNumber(state) { // 为了能够使用 `this` 获取局部状态，必须使用常规函数，不能使用箭头函数return this.number + state.moduleVal}})},watch: {helloName(newVal, oldVal) {console.log(newVal);console.log(oldVal);}},mounted() {console.log(this.addNumber);}}</script>三、求关注
求关注啊！！！