【vuex 】 安装及其基本使用
一，什么是vuex？
专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。
1，让我们从一个简单的 Vue 计数器应用程序来认识vuex：
const Counter = {
// state
data () {
return {
count: 0
}
},
// view
template: `
<div>{{ count }}</div>
`,
// actions
methods: {
increment () {
this.count++
}
}
}
createApp(Counter).mount('#app') 2，原理图
- 状态，驱动我们应用程序的事实来源;
- 视图，状态的声明性映射;
- 操作，状态在响应视图中的用户输入而更改的可能方式。
①，这是单向数据原理图，
②，当我们有多个共享共同状态的组件时，这种简单性很快就会崩溃：
- 多个视图可能依赖于同一个状态。
- 来自不同视图的操作可能需要改变同一状态
二，应用场景
多个组件应用与同一个状态，多个组件变更同一状态。
三，安装
npm i vuex@3 // 注释：@3是版本号，vue2用vuex@3版本,vue3用4版本四，store
1，概念：每一个Vuex应用的核心就是Store（仓库），我们可以说Store是一个容器，Store里面的状态与单纯的全局变量是不一样的，无法直接改变Store中的状态。想要改变状态需通过mutation去修改。
2，结构及操作步骤
第一步：
在src根目录下store创建文件夹与，建立index.js。需包含actions，mutations，state结构如下：
在index.js文件下写入该结构
//1 引入vue
import Vue from 'vue'
//2 引入vuex
import Vuex from 'vuex'
//3 应用vue插件
Vue.use(Vuex)
//4 actions响应组件中的动作
const actions = {
}
//5 mutations操作数据state
const mutations = {
}
//6 准备state存储数据
const state = {
//状态对象
}
//7 创建store并导出
const store = new Vuex.Store({
actions,
mutations,
state,
})
//8 默认导出store
export default store 第二步：
在main.js中引入store，全局组件都可以使用vuex。
//引入store
import store from './store'
new Vue({
render: h => h(App),
store //挂载store
}).$mount('#app') 五，状态的核心概念
1，state
state是状态数据，可以通过this.$store.state来直接获取状态，也可以利用vuex提供的mapState辅助函数将state映射到计算属性（computed）中去。插值引用：{{$store.state.sum}}
mapState:在计算属性中写法
...mapState({
title:state=>state.title,
major:state=>state.major,
}) 当映射的计算属性的名称与 state 的子节点名称相同时，mapState 传一个字符串数组 ...mapState(["title"])
2，actions
Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。
// actions响应组件中的动作
//context 上下文，value组件传递过来的值
//可以包含定时器，ajax代码，有业务逻辑使用action，无业务逻辑直接使用mutations
const actions = {
sumwait(context,value){
setTimeout(()=>{
context.commit('JIA',value);
},2000)
}
} 在组件中使用: $store.dispatch('对应的 action 回调名') 触发。示范： this.$store.dispatch('sumwait',1)// 'sumwait' 为action的动作，1为触发的值 3 mutations
更改 Vuex 的 store 中的修改状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。
代码案例：
const mutations = {
JIA(state,value){
state.sum = state.sum+value;
},
JIAN(state,value){
state.sum = state.sum-value;
},
} 组件中触发： this.$store.commit('JIA',this.num); 此时的mutations 无业务逻辑，就是更改状态。
4 getters
有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数，也就是对状态在加工：
代码案例：
const getters = {
bigNum(state){
return state.sum*10
}
} 组件中调用数据： {{$store.getters.bigNum}} 5，数据映射(mapState和mapGetters),
mapState(mapGetters)生成计算属性,从state中读取状态(对象形式)
案例代码：
computed: {
// mapState生成计算属性,从state中读取状态(对象形式)
// ...mapState({realname:'realname',age:'age'})
//数组形式
...mapState(['realname','age']),
...mapGetters(['bigNum'])
}, 当前组件读取：{{realname}}
6 数据映射(mapMutations和mapActions)
借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
methods: {
...mapMutations({increment:'JIA',decrement:'JIAN'}),//对象形式
// ...mapMutations([‘increment’,’decrement’]),//数组形式，注意store需要有同名的mutations
} 传值需要： <button @click="increment(num)">+</button>六：模块化编码(modules)
Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割在模块中使用:namespaced: true, 命名空间，添加之后，当前模块下的标识符可以和其它模块相同,用于解决不同模块的命名冲突问题
代码实例：
const countOptions = {
namespaced:true,
state:{
sum:0,
realname:'张三',
age:19,
},
actions:{
sumwait(context,value){
setTimeout(()=>{
context.commit('JIA',value);
},2000)
}
},
mutations:{
JIA(state,value){
state.sum = state.sum+value;
},
JIAN(state,value){
state.sum = state.sum-value;
},
},
getters:{
bigNum(state){
return state.sum*10
}
}
}
const store = new Vuex.Store({
modules:{
countOptions
}
})
组件调用（加上命名空间）：
computed: {
...mapState('countOptions',['realname','age','sum']),
...mapGetters('countOptions',['bigNum'])
},
methods: {
...mapMutations('countOptions',{jia:'JIA',difference:'JIAN'}),
sumwait(){
this.$store.dispatch('countOptions/sumwait',this.num)
}
}, 
