L1uEan关于vuex的见解

vuex步骤

1. 安装

    npm install vuex --save

2. 创建仓库

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

    //vuex 注册给vue
    Vue.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.js
    import 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中的a
        b:"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下的state
        name:“name"
    }),
    ...mapState('test1',{    //只展开 test1 模块下的state
        test1Name:'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)
      }
})]