vuex的使用和安装

在小黑框内输入cnpm i vuex@3.0

cnpm i vuex@3.0

成功提示

之后创建一个store文件夹里面创建一个index.js

在index.js里面写

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    //放数据的地方
    },
  mutations: {
   //接传过来的事件的地方
     },
   modules:{
   //模块化,将不同的业务模块数据和方法分别引入
   },
    plugins:[vuexLocal.plugin] // 插件让vuex中的数据可以本都存储

})

export default store

之后再main.js里面引入

import store from "./store/index"

再把引入的store挂载在Vue上

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

vuex的使用

再组件内使用事件进行传递

//在组件内使用
delete(index){ //传递的参数
   this.$store.commit('delete',index) //commit会自动去store.js里面查找事件名进行处理
      }

//在store.js里面接收
mutations:{
  //传递过来的名字
      delete(state，index){ //里面有两个参数 第一个是state第二个是传递进来的参数
           console.log(index) //如果index有值证明接收成功

           }
   
}


  
 this.$store.commit('传递的事件名',参数);

vuex中在组件上展示的数据会随着页面的刷新而丢失，为了防止他的丢失还需要进行处理下载一个插件 cnpm i   vuex-persist （会有兼容问题要是报错就卸载了吧）

成功提示

在index.js里面写

import VuexPersist from 'vuex-persist';
const vuexLocal = new VuexPersist({  // 配置它的存储方式
    storage: window.localStorage
})

还要写

const store = new Vuex.Store({
  state: {},
  mutations: {},
  plugins:[vuexLocal.plugin] //写着一行

})

这样就配置完成了 在组件内显示里面的值刷新页面值不丢就是成功了

辅助函数

mapState辅助函数 用于将vuex中的state中的数据直接映射到data中，在需要使用数据的组件内引入

mapGetters也是一个辅助函数

如果有模块的情况下 需要在每一个模块的js里面写入  namespaced:true来激活他的名字

import {mapState,mapGetters} from "vuex";
export default{
    //在computed中写入

     computed:{ 
         // 语法
          ...mapState(['数据名字'])    //在没有模块的情况下使用     
           
          
          ...mapstate({  
              在当前组件要展示的名字:state=>{return state.模块名字.属性名字}

             })  // 有模块的情况下使用
      
          }

  }
//上面的配置好了在组件内 直接使用{{在当前组件要展示的名字}}