vuex (概念、几部分组成、map高级语法、数据持久化)

目录

1、vuex的概念详细理解

vuex有五个核心概念

 

备注

详述Vuex运行机制

 Vuex中如何异步修改数据

2、vuex补助函数(语法糖)

3、vuex  数据持久化

---

1、vuex的概念详细理解

（1）Vuex是专门为vue.js应用程序开发的状态管理模式，它其实就相当于一个公共仓库，保存着所有的组件都能公用的数据
（2）它的状态存储是响应式的，如果我们的组件使用了vuex，一旦里面的state发生改变，它所关联的所有组件都会发生改变，这样为我们开发项目提供极大的便利，

（3）vuex还不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径： 显示地提交（commint）mutations来实现修改。

（4）这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常简洁
 

vuex有五个核心概念

① state：          存储数据的地方
② actions：      异步操作 借此触发mutations的方法，保存数据
③ mutations:     同步操作，只有mutations可以修改state中的数据 
④ getters：       相当于 state的计算属性。 
⑤ moduleas：   模块化，为了开发大型项目，方便状态管理而使用的，

如下：

五大核心	调用	补助函数
state	this.$store.state. 变量名	mapState
actions	this.$store.dispatch()	mapActions
mutations	this.$store.cmmi()	mapMutations
getters	this.$store.getters. xxx	mapGetters
moduleas	store.state.模块名.属性名	无

基本使用：

1. 首先我们需要下载vuex
2. 我们的根目录下创建一个store文件夹，在这个里面创建一个state.js文件。
3. 在这个js文件中创建我们的vuex。
4. 首先引入vue，之后引入我们的vuex。
5. 使用vue.use(vuex)方法
6. 直接导出 new vuex.Store() 实例构造器
7. 我们在这个方法中定义状态和方法。
8. 之后在我们根目录下的min.js中引入，并挂载到原型上即可。
9. 创建实例

  vuex的安装

 npm install vuex --save

import Vue from 'vue'
// 引入 vue
import Vuex from 'vuex'
// 引入vuex
Vue.use(Vuex)
export default new Vuex.Store({
	// 导出一个vuex实例
	state: {
		// 状态
		msg:"没改变"
	},
	mutations: {
		// 同于修改状态
		btn(state,data){
		// state 我们的状态对象，这里没有this，想要修改状态必须通过mutations。
		// data 调用这个方法的时候，可以传递过来参数。注意：只能传递一个参数。
		state.msg="改变了"
		}
	},
	actions: {
		// 异步触发mutations
	},
	getter: {
		// 类似于计算属性

	}
})

在main.js中引入

import Vue from 'vue'
import App from './App'
import store from './store/index.js';
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App,
	store
	// 挂载到vue实例上
})
app.$mount("#app")

在组件中使用的时候 

this.$store.state.变量名
// 读取数据
this.$store.commit("方法名",数据);
// 触发我们mutations中的方法，可以传递参数，也可以不传递。
this.$store.dispath("事件名",参数);
// 触发我们的ctions中的异步方法，在通过mutations触发我们的同步方法修改state
this.$store.getters.fun()
// 调用我们getters中的属性

我们vue在模板中使用vuex时，可以省略this，只能使用state和getters 

注意
我们在小程序中是无法在模板中直接使用state和getters的。
我们可以使用补助函数，或者是模板中的计算属性，把状态return出去。 

   state

 

可以通过 store.state 来获取状态对象，以及通过 store.commit 方法触发状态变更
 每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，
 它包含着你的应用中大部分的状态 (state)。

备注

其实vuex本质上只是一个公共变量，是存储在浏览器内存中的，刷新页面，浏览器内存重置，数据也会被清空。。有时候我们需要把一些数据固话到本地，即使刷新也不能清空，例如：登陆状态、token等。这是就需要用到vuex数据持久化。如果要做数据持久化存储，肯定需要借助浏览器缓存，常用的也就localStorage,sessionStorage,

详述Vuex运行机制

（1）Vuex的状态存储是响应式的
（2）当vue组件从store中读取时，若store中状态发生改变，响应的组件也会更新状态
（3）不能直接改变state，必须通过显示的提交(commit)mutations来追踪每个状态的变化

 Vuex中如何异步修改数据

（1）同步更改mutations
（2）异部更改action,action中通过commit触发mutations进行state数据更改
（3）页面中触发action中函数

 

2、vuex补助函数(语法糖)

1. 首先我们需要先引入
2. 然后使用展开运算符将其展开
3. 相当于把state展开到我们组件中了
   注意
   mapState和mapGetter的使用只能在computed计算属性中，
   mapMutations和mapActions使用的时候只能在methods中调用否则报错
   首先是引入

<script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
// 我们使用哪个引入哪个也可以

</script>

 之后我们使用展开运算符

<script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
export default {
  data(){
    return{

    }
  },
  computed:{
    ...mapState({
      counts:(state) => state.count
    }),
    //mapState就等于下面这个
    // counts(){
    //   return this.$store.state.count
    // },
    ...mapGetters({
      getternum:'doneTodos'
    }),
    //mapGetters就等于下面的这个
    // getternum(){
    //   return this.$store.getters.doneTodos
    // }

  },
  methods:{
    ...mapMutations({
      addnum:'addNum'
    }),
    addnum1(){
      this.addnum()
    },
    //mapMutations就等于下面的这个
    // addnum1(){
    //   this.$store.commit('addNum')
    // },
    
    ...mapActions({
      actionnum:'actionNumAdd'
    }),
    actionnum6(){
      this.actionnum()
    },
    //mapActions就等于下面的这个
    //  actionnum6(){
    //   this.$store.dispatch('actionNumAdd')
    // }
    
  }
}
</script>

 

3、vuex  数据持久化

什么是数据持久化?

数据持久化是将我们vuex种state种的数据都保存在本地存储种，一旦state种的数据发生改变，就更新本地存储种的数据。我们在刷新页面后会帮我们自动获取数据，不用我们手动获取。

1、安装

npm i vuex-persist --save 

2、在vuex文件种引入

import name from ‘vuex-persist’ 

3、使用

import Vuex from 'vuex'
import name from 'vuex-persist'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
  plugins: [
  //在vuex里跟state同级配置
    new name({
      storage: window.localStorage,
    }).plugin,
  ],
})

 这样我们就不必每次都存储一次了，节省我们大量的时间和重复代码。