6. Vue 引入vuex store

Posted 2023-05-07

参考技术A 如果打算开发一个大型的单页应用，使用vuex比较合适。它可以让页面中多个组件共享变量，即单页面中全局的变量。
如果应用比较简单，可以不考虑使用vuex来管理全局变量。
注意，vuex在单页应用中生效，如果跳转到其他页面，vuex会失效（不会保存上一个页面的变量信息）。
这里注意版本对应关系 vue2/vuex3，vue3/vuex4。

这里指定版本vuex3

推荐目录结构，在src目录下新建store目录，新建index.js。

在main.js中引用

https://gitee.com/animal-fox_admin/learn-vue-web
branch：lesson4

25vuex改变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 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