2五、vuex改变store中数据

以登陆为例：

一、安装vuex：npm install vuex --save


二、在main.js文件中引入：

import store from '@/store/index.js'
new Vue({ router, store, render: h => h(App) }).$mount('#app')

 

三、在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容以下:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)

 export default new Vuex.Store({ state: { Token: '',
 userName:'' },
//假设须要在state.userName基础上派生出一个新的状态newUserName出来，就适合使用getters
 getters:{ newUserName:state => “Hello”+state.userName}
 //同步方法  mutations: { SET_TOKEN(state, params) { // console.log(params.Token, params.userNo); state.Token = params.Token;
 state.userName=params.userName;

 }
 },

 // 异步方法
 actions：{

           SET(context,Object) {
              //处理异步操做
             context.commit('SET_TOKEN',Object)
       }

   }

 })

三、在登陆页面派发事件：

// 同步 this.$store.commit("SET_TOKEN", payload); // payload 为参数

//异步  this.$store.dispatch('SET',payload)

 

四、在其余页面获取state中的共享数据：

import { mapState,mapGetters } from "vuex";

computed: {

  ...mapState({

     userName: state => state.userName,

  })

 //  ...mapGetters(["news"])

},

 

在页面dom中引入：{{userName}}

在methods中调用：this.userName