vuex步骤

1. 安装

    npm install vuex --save

2. 创建仓库

    import Vue from 'vue'import Vuex from 'vuex'//vuex 注册给vueVue.use(Vuex);//数据中心let state={count:10}//actions 异步操作（定时器，ajax）let actions={getsync(context,val){//context 值得是上下文对象。context.commit('increament',val)}}//mutations 同步修改state中的数据let mutations={increament(state,val){//state指的是 state数据中心state.count+=val;}}// getters  可以对state中的数据进行计算。（相当于组件中的computed）let getters = {newVal: (state)=> state.count*2}//实例化 仓库export default new Vuex.Store({state,actions,mutations,getters});//main.jsimport store from './store/index'//注入根组件new Vue({store,router,components:{xxxx}})A.vue{{this.$store.state.count}}{{this.$store.getters.newVal}}methods:{increament(){//两种手法//1. 通过dispatch()触发actions中的方法修改数据this.$store.dispatch('getSync',1)//2. 如果同步修改，通过commit()触发mutations中的方法修改。this.$store.commit('increament',1)}}

• 备注：

1. 只有commit()才可以触发mutations中的方法 （可以在组件中调用，也可以在actions中调用）
2. 只有dispatch()才可以触发actions中的方法 （只能在组件中调用）
3. vuex 是单向数据流
4. 只有mutations才可以修改state中数据。
5. Es6 规范： 导入模块  ---> import xxx from '路径'导出模块  ---> export default {}小小的注意：可以用es6中的解构赋值(按需导入)语法import { modea,modeb } from '/home/xxx.js'A: 公用的方法库， export default { a:functin(){},b:function(),c:function(){}}B:import { c } from '/A.js'c()commomjs规范（nodejs）导入模块：  require('路径')导出模块：  module exports { }

vuexState数据传入到组件中data不渲染问题

错误写法:
<template><div id="app"><img src="./assets/logo.png"><button @click="clickme">点击我</button><span>{{countnumber}}</span></div>
</template>
<script>export default {name: 'app',data() {return {countnumber: this.$store.state.count,}},methods: {clickme: function() {this.$store.commit("increment");}},}
</script>
<style></style>*** ：
为什么不渲染呢：你把this.$store.state.count放在data中取获取，这个data只会在组件中加载出来的时候渲染一次，后面虽然vuex中的值更新了，但是data里面是不会响应式的更新，你要把this.$store.state.count放在计算属性里面去获取，还可以通过watch来监听，这样每次vuex有跟新都能同步到视图了。大家应该都能猜到原因是什么。我这边想要描述的是：我们data里面的数据跟我们vuex里面的数据不是同一个数据，比如基本数据类型不是在一个‘存储位置’，就类似这么一个大概的概念，正确写法：使用1.wacth 2.computed
<template><div id="app"><img src="./assets/logo.png"><button @click="clickme">点击我</button><span>{{countnumber}}</span></div>
</template>
<script>export default {name: 'app',data() {return {countnumber: this.$store.state.count,}},methods: {clickme: function() {this.$store.commit("increment");}},watch:{"$store.state.list":function(val){this.telphone=val;}}}
</script>
<style></style>

vuex概念

vuex是状态管理器

五个核心：

state： 存储数据

actions： 异步操作

mutations: 同步操作，只有mutations可以修改statez中的数据

getters： 相当于 state的计算属性。

module:？模块化 modeA, modeB，modeC

vuex高级用法。

语法糖，包装函数。

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'computed:{...mapState({a:"a",   //  "a" 指的是state中的ab:"b"}),...mapGetters({Val:'newVal' // 可以重新命名})
}methods:{...mapActions({getSync:'getSyncNum'})...mapMutations({increament:"increament"})
}template{{a}}  {{b}}{{getSync(1)}}<button @click='increament(1)'></button>

modules

1. 状态树结构复杂的时候，可以用modules进行管理。

2. 多人协同开发，可以用modules，避免命名空间冲突。

//创建store，分模块定义const  test1 ={namespaced:true, //开启命名空间，在各组件总 ...mapState("test1",{name:"name"})state:{name:'test1'},actions:{},mutations:{changeName(state,arg){state.name=arg;},getters:{}
}const test2 = {namespaced:true,state:{},actions:{},mutations:{}},getters:{}
}new Vuex.Store({state:{name:"root"},actions,mutations,getters modules:{test1,test2}})在组件中使用：{{this.$store.state.name}}{{name}}{{this.$store.state.test1.name}}{{tes1Name}}import {mapState,mapMutations} from 'vuex'
computed:{...mapState({  // 没有指定模块名，表示展开root下的statename:“name"}),...mapState('test1',{    //只展开 test1 模块下的statetest1Name:'name'})
}
methods:{...mapMutations('test1',['changeName'])
}

• 备注：

   ...mapState("test1',['name'])...mapState('test1',{newName:'name'})如果参数二写成数组形式，组件中不可以重命名，如果参数二写成对象，可以重命名
  

vuex 超级篇 数据持久化

1. 什么是数据持久化？

当我们操作数据之后，刷新页面，数据情况，或者丢失。用户体验体验不好。

我们可以，把数据存储在缓存中（localstorage,sessionstorage,cookie）,来持久保存数据。

vuex中是如何做数据持久化的？

1. 安装

npm install vuex-persistedstate --save

2. 在vuex中初始化

import createPersistedState from 'vuex-persistedstate'plugins:[createPersistedState({key:'1906b',storage:window.localStorage})]

参数：

1. key, 指定 缓存中的名称。
2. storage, 指定存储的形式。（默认：localStorage, sessionStorage,Cookie）

如果用cookie:

npm install js-cookie --save

引入：
import * as Cookies from ‘js-cookie’

  plugins:[createPersistedState({key:'1906b',storage: {getItem: key => Cookies.get(key),setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),removeItem: key => Cookies.remove(key)}
})]