一、优点

Vuex状态管理跟使用传统全局变量的不同之处：

1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。
2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commit）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。否则就全局都会修改

二、安装VueX步骤

1.安装

  cnpm install vuex-localstorage

2.引用VueX

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

3.在引入Store

image.png

创建vuex的用法

import Vue from 'vue'
import Vuex from 'vuex'
import usersov from './user'
import createPersist from 'vuex-localstorage'

Vue.use(Vuex)

// 创建vuex 构造器
export default new Vuex.Store({
    state:{
        
    }
})

主要包括以下几个模块:

    1.State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
    2.Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
    3.Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
    4.Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
    5.Module：可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

1.State

//state存储应用层的状态
state:{  // 声明数据
        // n:0,
        // username:'',
        shopCar:[ 1,2,3,4,5],
        count:5 
    },

2.Getter

 getters:{// 类似与  state 的计算属性 可以根据state中的数据的变化 计算出新的值
        rgetShopCarLen(state){
            var sum = 0
            console.log(state.shopCar);
            for(var i=0; i<state.shopCar.length; i++){
                sum+=state.shopCar[i]
            }
            return sum
        }
    }

3.Mutation

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方
 mutations:{ // 修改数据的 方法
        increment(state,val){     // 添加这个名字state就可以不用this
            // 变更状态
            state.count += val;
        },
       
    },

我们在提交commit时候，字符串参数increment,就是对应在 mutations中的increment。

一般通过方法或钩子触发，例如：

methods: {
   getVal(item) {
     //通过commit提交一个名为increment的mutation
     this.$store.commit("increment", item);
   }
 }

4.Action

// 用来保存用户信息的 store
export default {
     //存放数据
      state:{
        userInfo:{},
        key:''
    },
   //通过commit mutations中的方法来处理
    mutations:{
        // 定义接收用户信息的方法
        updateUserInfo(state,val){
            state.userInfo=val
            console.log(state.userInfo);
        },
        undateKey(state,val){
            state.key=val
        }
    },
    //接受dispatch传递过来的方法和参数
    actions:{
        undateKey(state,val){
            //处理异步操作
            setTimeout(() => {
                //通过commit提交一个名为getParam的mutation
                //action 函数接收一个 store 的实例对象，因此你可以调用 store.commit 提交一个 mutation
                state.commit('undateKey',val)
            }, 0);
        }
    }
}

然后我们就在组件里这么调用就可以了

 methods: {
   getVal() {
      var name= 'xia';
      var age= '26';
      var sex= 'man';
      //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
      this.$store.dispatch('undateKey',{name,age,sex})

   }
 }

5.Module

随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'  // 模块
import createPersist from 'vuex-localstorage'

Vue.use(Vuex)

// 创建vuex 构造器
export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    // 模块或模组
    modules:{
        user  // 引入的模块
    },
  
})

user.js 文件

// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
export default {
    state: {
        text: 'moduleA'
    },
    getters: {},
    mutations: {},
    actions: {}
}

然后我们就在组件里这么调用就可以了

<template>
    <div class="demo">
        <h1>{{getText1}}</h1>
    </div>
</template>

computed: {
    getText1(){
        return this.$store.state.user.text;
    },
}

由此可知，模块内部的 state 是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问

vuex最最简单的项目实例

1.存储数据( a.vue文件 )

import { mapMutations } from "vuex"; // 引入mapMutations
export default {
    methods: {
        ...mapMutations({
            // 将changeNews与mutations中的SET_NEWS关联
            changeNews: "SET_NEWS"
        }),
        submit(){
            // 提交一个名为changeNews的mutation，并传入参数val
            let val = 'test news';
            this.changeNews(val);// 相当于this.$store.commit("changeNews", val);
        }
    }
}

2.获取数据( b.vue文件 )

import { mapGetters } from "vuex"; // 引入mapGetters 
export default {
    computed: {
        // 用vuex读取数据(读取的是getters.js中的数据)
        // 相当于this.$store.getters.news(vuex语法糖)
        ...mapGetters(["news"])
    },
    created() {
        // 获取getters中news数据
        console.log(this.news);
    }
}

.

3.store文件目录结构

index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import * as getters from './getters'

//每次修改state都会在控制台打印log
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations,
    strict: debug, // 当debug=true时开启严格模式(性能有损耗)
    plugins: debug ? [createLogger()] : []
})

state.js:

const state = {
    news: {}
}
export default state

mutations.js:

const mutations = {
    SET_NEWS(state, val) {
        state.news= val
    }
}
export default mutations

actions.js:

//异步处理
const actions = {
    M_NEWS({ commit }, val) {
        commit('SET_NEWS', val);  // commit mutations修改
    }
}

export default actions

4.使用store

在main.js中引用

import Vue from 'vue'
import App from './App'
import router from './router/index'

Vue.config.productionTip = false

import axios from 'axios'
Vue.prototype.axios=axios;

import store from './store/index'

new Vue({
  el: '#app',
  router:router,
  store:store,
  components: { App},
  template: '<App/>'
})