Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件状态，Vuex 中可以存放一些需要在多个界面中进行共享的信息。相当于一个公共仓库，保存着所有组件都能共用的数据。

Vuex 插件的安装

npm install --save vuex@3.6.2

 在 src 目录下新建 store 文件夹，在 store 文件夹内新建一个1 index.js文件引入、安装、创建并导出Vuex对象。

import Vue from 'vue'
import Vuex from 'vuex'

//1.安装插件
Vue.use(Vuex)
//2.创建对象
const store = new Vuex.Store({})
//3.导出使用
export default store

在 main.js 文件中挂载使用

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
 
Vue.config.productionTip = false
 
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

 Vuex分成五个状态： 1.State 2.Getters 3.Mutations4.Actions 5.Module，下面进行详细的讲解

 1.  State

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

 在vuex中state中定义数据，可以在任何组件中进行调用

调用的方法一：在标签中直接使用 <p>{{$store.state.name}}</p>

 调用的方法二：this.$store.state.全局数据名称

 调用的方法三：从vuex中按需导入mapstate函数

在需要用的页面引入import { mapState } from "vuex";

 2. Mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

 在 mutations定义两个方法去操作state,  addcount增加  reduce减少

mutations: {
        addcount(state, num) {
            state.age = +state.age + num
        },
        reduce(state) {
            state.age--
        }
},

 在组件中使用：

 <button @click="btn1">点我增加store仓库里的数据</button>
 <button @click="btn2">点我减少store仓库里的数据</button>

调用的方法一：使用commit触发Mutation操作

 methods: {
    btn1() {
      this.$store.commit("addcount", 1); //每次加一
    },
    btn2() {
      this.$store.commit("reduce");
    }
  }

调用的方法二：使用辅助函数进行操作,引入import { mapMutations} from "vuex";

methods: {
    ...mapMutations(["addcount", "reduce"]),
    btn1() {
      this.addcount(10);
    },
    btn2() {
      this.reduce();
    }
 }

3.  Action ——进行异步操作

Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action

 actions: {
        asynAdd(context) {
            setTimeout(() => {
                context.commit("reduce")
            })
        },
},

 在组件中使用：

 <button @click="btn2">点我减少store仓库里的数据</button>

调用的方法一：直接使用  dispath触发Action函数

this.$store.dispath("asyncAdd")

调用的方法二：使用辅助函数,引入import { mapActions} from "vuex";

  methods: {
    ...mapActions(["asynAdd"]),
    btn2() {
      this.asynAdd();
    }
  }

4. Getter

类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据

 5.  Modules

当遇见大型项目时，数据量大，store就会显得很臃肿

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

 modules: {
        cityModules: {
            namespaced: true,
            state: {
                cityname: "中国",
            },
            mutations: {
                cityfunction(state) {
                    state.cityname = "日本"
                }
            }
        },
        userinfo: {
            state: {
                username: "名字"
            }
        }
   }

 在组件上面使用：

<button @click="btn3"></button>

调用的方法一：

 methods: {
    btn3() {
       console.log(this.$store.state.cityModules.cityname);
    }
  }

Vuex中的store

安装vuex

npm install vuex --save

main.js引入vuex

import store from './store'
Vue.prototype.$store = store
const app = new Vue({
	...App,
	store
})

在vue->src目录下创建一个store文件夹，里面包含一个index.js和modules->storemoduls.js

 store->index.js

import Vue from 'vue'
import Vuex from 'vuex'
import storemoduls from './modules/storemoduls'
Vue.use(Vuex)
const store = new Vuex.Store({
	modules: {
		'storemoduls': storemoduls,
	}
})
export default store

modules->storemoduls.js

export default {
	namespaced: true, //命名空间
	state: () => ({
       //uni.getStorageSync同步获取本地缓存中内容
		token: uni.getStorageSync('token') || '',
	}),
	//同步操作的方法可接收两个参数,用来更改state中的数据
	mutations: {
		updateToken(state, token) {
			state.token = token
           //使用this.commit('模块名/函数')的方法来调用另一个Mutations方法
			this.commit('storemoduls/saveTokenToStorage')
		},
		saveTokenToStorage(state) {
           //uni.setStorageSync同步存储在本地缓存中
			uni.setStorageSync('token', state.token)
		}
	}
}

在需要的页面使用

<view>{{token}}</view>
import { mapMutations,mapState } from 'vuex'
computed: {
			...mapState('storemoduls', ['token']),//获取token的值
},
methods: {
	...mapMutations('storemoduls', [ 'updateToken']),
    this.updateToken(res.data.token)//向updateToken方法中的token赋值
}