VueX使用简明笔记

1、作用：

vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据

说明：本文仅限于你已经知道vuex是做什么的，但是对于具体怎么用比较陌生，或者忘记了，的一份笔记，不讲述具体原理。

2、安装并导入vuex：

2.1安装

版本对应关系：
vue 2 —> vuex3
vue 3 —> vuex4

npm install vuex@3 --save

2.2 导入

在项目的main.js中导入：

import Vue from 'vue'
import App from './App.vue'
//导入
import store from './store/index'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  //配置vuex ,store:store,同名，所以简写了。
  store
}).$mount('#app')

3、创建store

在脚手架目录的src目录下，新建目录store

在建好的store目录内，新建文件：index.js：

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

//导入子模块，如果有的话
import person from './person'
Vue.use(Vuex)
 
// 创建Vuex对象
const store = new Vuex.Store({
    //简单数据： 保存的全局状态变量
    state: {
        //定义数据
    },

    // 同步，用于操作、改变数据
    mutations: {
       // 定义方法
          方法名(state, payload){
            state.变量名 //读取数据
            payload //传进来的值
        }
    },

    // 异步：业务处理、等待异步、请求等，不建议这里操作改变数据,
    actions: {
          // 定义方法
       方法名(context, payload){
          //actions逻辑处理完成后，commit传递到mutations中操作处理数据
          context.commit(mutations中的方法名,payload是传进来的值)
       }
    },
   //计算属性
    getters:{
      // 定义方法
        方法名(state){
            return state.数据 处理后
           
        }
    },


    // 子模块 ，如果有
    modules: {
        person
    }
 
})
// 导出vuex
export default store 

4、创建独立模块（非必须）

如果需要的话，在sorte目录下创建独立模块，并在index.js中导入并引用

子模块示例person.js：

export default 
    {
        namespaced: true,    // 开启自定义的命名空间名称
        //全局数据
        state: {
            p:{
                name:'张三',
                age:18
            }
        },
 
        //同步： 改变数据
        mutations: {
        // 定义方法
        },
        // 异步：改变数据，不建议
        actions: {
        // 定义方法
        }
 
    }
 

5、使用vuex

5.1按需导入

//以下映射模块，按需导入

//mapState把store中的state映射到-计算属性
import { mapState } from 'vuex';
// mapMutations把store中的方法映射到-methods
import { mapMutations } from 'vuex';
// mapActions把vuex中的actions映射到-methods
import { mapActions } from 'vuex';
 // mapGetters 把getters 中的数据映射到-计算属性
import { mapGetters } from 'vuex';

5.2 映射的三种写法

可能不止三种，这是我用到和知道的

 // 写法1
    ...mapState(['count', 'app']),
 // 写法2
    ...mapState({
      c: 'count', //相当于给数据count起了一个别名c
      a: "app"
    }),
 // 写法3 针对子模块
  ...mapState(
      'person', // 指定子模块的命名空间名称
      ['p'] //state状态变量中的数据
  )

需要注意的是：
mapState和mapGetters 是在计算属性中
mapActions 和 mapMutations 是在 methods中
千万别搞错了！！！

5.3 数据和方法的使用

配置好上面的映射，就可以使用了

this.数据名    //如：this.count
this.方法名(传值) //如：this.addOne(1)

或者像使用本组价数据一样，使用插值语法

6、未映射写法：

//  调用mapActions写法，传入方法名,值
this.$store.dispatch("asynAdd",1)

//  调用Mutations写法，传入方法名,值
this.$store.commit("addcount",10)

//  调用getters写法  xxx为getters中的函数名
this.$store.getters.xxx

//  子模块 调用写法
this.$store.commit('product/addList', this.value3) 
...