一、什么是 vuex ?

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
• 它采用集中式存储管理应用的所有组件的状态，
• 并以相应的规则保证状态以一种可预测的方式发生变化。 (必须按照规定的方式改变数据)

二、store的基本使用

vue环境下

1. 下载安装npm install vuex --save
2. main.js中引入

// 引入
import Vuex from 'vuex'
Vue.use(Vuex)

3. 注册

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      // state.count++
      state.count += 1
    }
  }
})
new Vue({
  store,
  router,
  render: h => h(App),
}).$mount('#app')

4. 使用:在组件需要的位置获取数据$store.state.字段名

• 如果是在data中那就加this,模板则不需要

5. 对数据进行修改的使用

• 需要使用 commit 的方式调用 mutation
• 调用时需要两个参数,第一个是mutaion 的路径,包括文件名和函数名,中间用反斜杠隔开
• 第二个是你想要传进去的 data 数据
• this.$store.commit('文件名/函数名',传入的data数据)
• (这里示范没有加第二个参数,另一种方式可以参照下面nuxt模式)

<template>
  <div class="test">
    {{ $store.state.count }}
    <button @click="$store.commit('increment')">加一按钮</button>
  </div>
</template>

nuxt环境下

1. 数据放在哪里 store state 里面

• 创建仓库, nuxt 框架已经封装好各种引入, 所以可以直接使用, 只需要创建文件即可

2. 如何存入/更新数据 可以在 store state 里面初始化 / 调用 mutation 函数进行数据改造

• 存储时跟data写法相类似,使用函数的方式是为了复用使用防止污染
• 必须规定方式修改,不能随意赋值

export const state = () => {
    return {
        abc: 123
    }
}


//修改state里面的数据,必须使用mutations里面的函数
export const mutations = {
    setAbc(state, data) {
        //每个mutation函数都可以接受到两个参数
        //第一个是state对象本身
        //第二是调用函数是额外添加的数据
        //这里需要做的就是改变state数据
        state.abc = data
        //这样外面调用这个函数,并且传入数据,即可改变当前的abc属性
    }
}

3. 获取数据 this.$store.state.模块名.字段名

• 如果是在data中那就加this,模板则不需要
• $store.state是固定写法

  {{ $store.state.userstore.abc }}

效果

4.对数据进行修改的使用

• 需要使用 commit 的方式调用 mutation
• 调用时需要两个参数,第一个是mutaion 的路径,包括文件名和函数名,中间用反斜杠隔开
• 第二个是你想要传进去的 data 数据
• this.$store.commit('文件名/函数名',传入的data数据)

 mounted() {
    console.log(this.$store.state.userstore.abc); //123
    //这里调用延时器为了演示变化效果
    setTimeout(() => {
      // 需要使用 commit 的方式调用 mutation
      // 调用时需要两个参数,第一个是mutaion 的路径,包括文件名和函数名,中间用反斜杠隔开
      // 第二个是你想要传进去的  data 数据
      //this.$store.commit('文件名/函数名',传入的data数据)
      this.$store.commit("userstore/setAbc", 666);
    }, 2000);
  },

三、store实现过程图

四、什么时候需要用到vuex?

• 当遇到大型项目时,希望数据安全性提高,不能随意变更时可以考虑使用vuex.如果是小型项目不建议使用,会使代码变得冗余.

五、优势

• js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便
• 属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会)
• 限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染

六、利用插件持久化到本地储存的方法

vuex(store)利用插件持久化到本地储存的方法