vuex this.$store.state.属性和mapState的属性中的一点点区别

做泰康公众号的项目时候有一个需求创建公众号的时候后台有一个社区id提供给后台展现人员和部门,在群发消息时候也要给后台一个社区id只不过获取社区的id接口和上一个不是一样的,本来在页面中写了两个select,一个是用elementUI的select选择器,另一个是在标签选择器,现在在创建公众号时使用公众号社区的id让群发消息的select隐藏,我是用vuex在state里声明两个变量分别设置falese ,true,这样在引用各个接口时候v-show显示相应的数据,用this.$store.state.属性是可以设置和获取相应的值,但是用mapState属性能获取但是设置不了值,如果设置就会报错,如果设置需要在mutations中来处理。代码如下

state:

export default {  selectAcounts: true, // 创建公众号  selectMassmessag: false // 群发社区}mutations:
export default {  updateLoginStatus (state, bool) {    state.isLogin = bool  },  updateselectAcounts (state, bool) {    state.selectAcounts = bool  },  updateselectMassmessag (state, bool) {    state.selectMassmessag = bool  },}在组件方法中引入mapMutationsmethods:{
...mapMutations([‘updateselectAcounts‘, ‘updateselectMassmessag‘])//点击选择按钮时候出发mapMutations中的两个方法改变state中的值 也可以通过this.store.$state.selectAcounts = false和this.$store.state.selectMassmessag = true来重新设置值
showTreeToast (type) {

this.updateselectMassmessag(true)

this.updateselectAcounts(false)
}

}
 

原文地址:https://www.cnblogs.com/zhx119/p/10123649.html

时间: 2024-10-08 22:02:12

vuex this.$store.state.属性和mapState的属性中的一点点区别的相关文章

关于 vuex 报错 Do not mutate vuex store state outside mutation handlers.

10 :问题描述 在使用vuex 时,有时候 我们在mutation中定义好方法,在页面或组件提交时 有可能经常会遇到这个错误:---->>Do not mutate vuex store state outside mutation handlers. 9. 原因: The reason is that arrays are stored as references in Javascript and payload.items is likely to be changed outside

修改 vuex $store.state 里取出的数据不响应

一定要先拷贝 let { showLabel, actualValue } = this.record; let show = this.rowData[showLabel]; let actual = this.rowData[actualValue]; const { formGroup } = this.$store.state.right; const { dispatch } = this.$store; let group = _.cloneDeep(formGroup) // 这一

vuex使用之state访问状态对象

引入vuex1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install vuex --save 需要注意的是这里一定要加上 –save,因为你这个包我们在生产环境中是要使用的. 2.新建一个vuex文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex. import Vue from 'vue';import Vuex from 'vuex'; 3.使用我们vuex,引入之后用Vue.use进行引用.

Vuex状态数据源state

(1)单一状态树 Vuex 使用单一状态,用一个对象就包含了全部的应用层级状态.至此它便作为一个“唯一数据源 (SSOT)”而存在.这也意味着,每个应用将仅仅包含一个 store 实例. 单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照. 单状态树和模块化并不冲突——之后介绍如何将状态和状态变更事件分布到各个子模块中. (2)入口文件状态注入 Vuex 通过 store 选项,提供了一种机制将状态从根组件“注入”到每一个子组件中(需调用 Vue

25、vuex改变store中数据

以登录为例: 1.安装vuex:npm install vuex --save 2.在main.js文件中引入: import store from '@/store/index.js'new Vue({ router, store, render: h => h(App) }).$mount('#app') 3.在src文件目录下新建一个名为store的文件夹,为方便引入并在store文件夹里新建一个index.js,里面的内容如下: import Vue from 'vue' import

Vue--vuex状态管理-多界面状态管理$store.state.变量名称 ---数据通触发事件改变this.$store.commit

1.作用需求:多个状态,在多个界面的共享问题 比如:用户的登录状态,用户名称,头像,地理位置信息等等 比如:商品的收藏, 这些状态信息,我们都可以放在同一的地方,对他进行保存和管理,而且他们还是响应式的. 2.不同于父子组件之间的传递,应用于没有直接的关系. 使用步骤: 一,Vuex是一个插件  下载: npm install vuex --save 二,创建一个文件夹store,仓库的意思,或者叫vuex,不建议直接在main.js文件中引入.就像router路由一样,这样会使main文件越来

vuex直接修改state 与 用dispatch/commit来修改state的差异

一. 使用vuex修改state时,有两种方式: 1.可以直接使用 this.$store.state.变量 = xxx; 2.this.$store.dispatch(actionType, payload) 或者:  this.$store.commit(commitType, payload) 使用dispatch 和 commit的区别在于,前者是异步操作,后者是同步操作,所以 一般情况下,推荐直接使用commit, 即 this.$store.commit(commitType, pa

vuex创建store并用computed获取数据

vuex中的store是一个状态管理器,用于分发数据.相当于父组件数据传递给子组件. 1.安装vuex npm i vuex --save 2.在src目录中创建store文件夹,里面创建store.js (1)store.js里引入vue和Vuex, import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) (2)创建并导出store对象 export const store = new Vuex.Store({ }) (3)在st

vuex的state在组件选项data和computed上引用的区别

引用在vue组件的data选项,不因数值被改变而更新引在在vue组件的computed选项,因数值变化而更组件 案例代码如下,调整下引用vue和vuex地址即可展示 <!DOCTYPE html> <html> <head> <title> vuex的配置state,mutations 和vue组件调用及模板组件</title> <script src="js/vue.js" type="text/javasc