VueX的安装及用法

一。什么是VueX，VueX是什么?

VueX是一个用来管理组件之间通讯的插件，他就是专门为vue.js应用程序开发的状态管理模式，他解决了组件之间同一状态的共享问题他能更好的在组件外部管理状态

二。安装vueX

1、使用npm安装vuex

npm install vuex--save

2、使用import引入vuex

import Vuex from ‘vuex’

3、使用Vue的插件引入函数Vue.use()使用Vuex

Vue.use(Vuex)

4、创建好的vuex不能直接使用，我们要去main.js(全局)中配置

import store from './store/index'

new Vue({
  el: '#app',
  router,
  store，他要和import引入的名字一样
  components: { App },
  template: ''
})

三。主要包括以下几个模块

state mutations getters modules actions
state：是vuex的基本数据，用来存储变量 （后四个属性都是用来操作stater里面存储变量的）

state:{ //声名数据
        shopCar:[],
        num:'',  
    },

使用时：

this.$store.state.属性名

mutation：是提交数据的方法，可以直接操作state它是同步的（异步的得使用action）

state:{ //声名数据
        shopCar:[],
        num:'',  
    },
mutations:{//修改数据方法  同步代码
        updateShopCar(state,val){
            state.shopCar.push(val)
        }  
    },

getters:类似于计算属性，可以根据state中的数据变化 计算出新的值

getters:{ //类似于  state 的计算属性   可以根据state中的数据变化  计算出新的值
        regetShopCarLen(state){
            var sum=0
            for(var i=0;i

使用时：

$store.getter.方法名

modules:它允许我们将 store 分割成模块 ，让每个模块都有自己的 state、mutation、action、getter

modules:{
        user, 创建一个user.js 然后引入user.js 在然后就可以去user.js里面进行操作了
    },

我们要引入模块

import user from './user.js'

然后在模块里

export default {
    state: {},
    mutations: {},
    actions: {},
    getter:{}
}

使用时：

this.$store.state.user。一个变量名

actions 和mutations的使用方法相同 （但是它是执行异步代码）

   state: {
        key:"",
    },
    mutations: {
            updakeKey(state, val) {
            state.key = val
            console.log(state.key);
            }},
    actions: {
        updakeKey(state, val) {
            setTimeout(() => {
                state.commit('updakeKey', val)
            },10);
        }
    }

使用时：

this.$store.dispatch('updakeKey',10)    //updakeKey:方法名     10 就是值

接收

 this.$store.state.key

plugins:是插件 它的作用就是长久存储 （得下载插件）

npm install vuex-localstorage  或者 npm install vuex-localstorage  下载

然后就是引入 vuex-localstorage 和使用 vuex-localstorage

import createPersist from 'vuex-localstorage'
plugins:[//插件 长久储存
       createPersist({namespace:'namespace-for-state',})
],