一、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.js
let state = {count: 1,name: 'dkr',sex: '男',from: 'china'
}
export default state

二、mapstate辅助函数

mapState是什么?

mapState是state的辅助函数.这么说可能很难理解

抽象形容:mapState是state的语法糖,这么说可能你还想骂我,因为你根本不了解什么叫做语法糖,事实上我说的语法糖有自己的定义,什么是语法糖?我对语法糖的理解就是,用之前觉得,我明明已经对一种操作很熟练了,并且这种操作也不存在什么问题,为什么要用所谓的"更好的操作",用了一段时间后,真香!

实际作用:当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 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作为组件的局部状态。

2、在组件、界面中使用mapState获取vuex中state的数据

3、modules的vuexTest模块中state数据

/*** vuexTest.js* modules 中的数据*/
export default {namespaced: true,state: {moduleVal: 1,moduleName: "战战兢兢"},getters: {},mutations: {},actions: {}
}

4、在界面或组件中不使用mapState获取模块modules vuexTest中state的状态

5、在界面或组件中使用mapState获取模块modules vuexTest中state的状态

三、求关注

求关注啊！！！