VUEX Store问题

Vuex是什么？

所谓的Vuex其实就是一个为Vue.js设计的数据仓库，就是把各个组件公用的数据放到一个仓库里面进行统一的管理

Vuex好处

1.既使非父子组件间的数据共享也能变得简单明了
2.让程序变得更加可维护（将数据抽离了出来）
3.只要仓库里面的数据发生了变化，在其他组件里面数据被引用的地方也会自动更新

Vuex怎么用？

先用vue-cli安装项目框架

1	npm install -g @vue/cli 或 yarn global add @vue/cli

安装Vuex

1	npm install vuex --save 或 yarn add vuex

初始化store.js

一般放到src/store/store.js下面

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex)

const store = new Vuex.Store({
 state: {
    test:'x'
  },
  mutations: {
    changetest(state, xxx) {
      state.test= xxx
    }
  },
  actions:{
     changetest(context, xxx) {
      context.commit('changetest',xxx)
    }
  }，
  getters: {
    test2: state => state.test
  }
}）
export default store;

state：相当于Vue的data
mutations：类似于事件，每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数
actions: Action 类似于 mutation，不同在于Action 提交的是 mutation，而不是直接变更状态，Action 可以包含任意异步操作
getters：可以认为是 store 的计算属性，就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，接受 state 作为其第一个参数

使用Vuex

打开main.js，导入，然后用

import Vue from "vue";
import App from "./App.vue";
import store from "./store";

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

如何使用 state
子组件能通过 this.$store 访问到
1
this.$store.state.test
如何使用 getters
子组件能通过 this.$store.getters 访问到
1
this.$store.getters.test2
如何使用 mutations
它会去把 changetest 提交到 mutation 执行，第二个是载荷(可以理解为参数)，大多数载荷应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读。
子组件能通过 this.$store.commit 访问到
1
this.$store.commit('changetest',xxx)
如何使用 actions
它会去把 changetest 分发到 actions 在通过 actions 提交到 mutation 执行
子组件能通过 this.$store.dispatch 访问到
1
this.$store.dispatch('changetest'xxx)

dispatch()与commit()区别

这两个的区别是存取的方式不同，两个都是传值给vuex的mutation改变state

this.$store.commit()同步操作

this.$store.commit("mutations方法名",value)

//存值
this.$store.commit('changeValue',name)

//取值
this.$store.state.changeValue

this.$store.dispatch()含有异步操作，可以向后台提交数据

this.$store.dispatch("action的方法名",value)

//存值
this.$store.dispatch('getlists',name)

//取值
this.$store.getters.getlists

实例
在store/modules文件夹里的user.js,声明user并释放出来。

const user = {
  state: {
    token: '',
    roles: null,
    isMasterAccount:true,
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token ="Bearer " +token
    },
  },
  actions: {
    // 登录
    Login({
      commit
    }, userInfo) {
      return new Promise((resolve, reject) => {
        login(userInfo.account, userInfo.password).then(x => {
          if(x.status200){
            const tokenV = x.data.token.tokenValue
            commit('SET_TOKEN', tokenV)
            document.cookie=`AuthInfo=Bearer ${tokenV};path:/`;
            token="Bearer "+tokenV;
            //setToken("Bearer " +token)
            resolve();
          }
        }).catch(error => {
          console.log("登录失败")
          reject(error)
        })
      })
    },
  }
}

注：必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法，才能在store存储成功。

handleLogin() {
  this.loading = true
  this.$store.dispatch('Login', this.loginForm).then(() => {
      this.$router.push({
          path: '/manage/merchant/account'
      }); //登录成功之后重定向到首页
      this.loading = false
      // this.$router.push({ path: this.redirect || '/' })
  }).catch(() => {
      this.loading = false
  })
}

this.$store.dispatch(‘Login’, this.loginForm)来调取store里的user.js的login方法，从而要更新。