码迷,mamicode.com
首页 > 其他好文 > 详细

25、vuex改变store中数据

时间:2019-07-24 16:27:43      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:调用   同步   npm   方法   mit   code   事件   stat   src   

以登录为例:

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 Vuex from ‘vuex‘

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        Token: ‘‘,
userName:‘‘ },
//同步方法 mutations: { SET_TOKEN(state, params) { // console.log(params.Token, params.userNo); state.Token = params.Token;
state.
userName=params.userName;
} }, })

3、在登录页面派发事件:

this.$store.commit("SET_TOKEN", payload); // payload 为参数
 
4、在其他页面获取state中的共享数据:
import { mapState } from "vuex";
computed: {
  ...mapState({
     userName: state => state.userName,
  })
},
 
在页面dom中引入:{{userName}}
在methods中调用:this.userName

 

25、vuex改变store中数据

标签:调用   同步   npm   方法   mit   code   事件   stat   src   

原文地址:https://www.cnblogs.com/xlfdqf/p/11238727.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!