vuex的知识点

什么是vuex

• 它是一个专为 Vue.js 应用程序开发的状态管理模式

vuex怎么用

1. 首先 cnpm install vuex -S 下载

2. 第二步在目录里创建store文件夹里面创建index.js

3. 第三步在index.js里面首先通过import Vue from 'vue’引入vue

4. 第四步在index.js里面再通过import Vuex from 'vuex’引入vuex

5. 第五步在index.js里面再通过Vue.use(Vuex)让vue使用vuex

6. 第六步在index.js里面再通过export default导出 new Vuex.store({})

7. 第七步在main.js里面通过import store from './store’导入 然后在 new Vue里面 store引入就可以了

创建vuex代码

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import VuexPersistence from 'vuex-persist'//vuex存储插件
//设置本地存储
const vuexLocal = new VuexPersistence({
  storage:window.localStorage
})
export default new Vuex.Store({
  // 使用vuex存储插件
    plugins:[vuexLocal.plugin],
  state: {
      
  },
  mutations: {
    
  },
  actions: {

  },
  modules: {

  }
})

vuex有哪些函数

1.state(它是一个存储数据状态)

state:{
    user:'',
    arr:[]
}
 组件：
 this.$store.state.变量名

注意：在vue组件怎么使用 this.$store.state.变量名

2.mutations(它是一个同步修改state数据状态)

  mutations: {
    add(state,val){
        state.user = val 
    }
  }
   组件：
 methods:{
     事件名(){
         this.$store.commit('mutations里面方法名',要传的值)
     }
 }

注意：在vue组件怎么使用 首先通过事件来触发this.$store.commit(‘mutations里面方法名’,要传的值)然后vuex里的 mutations里写个方法（第一个参数是state，第二个参数是传递的值）

3.actions(它是一个异步修改mutations里的state数据状态)

  actions: {
    increment (context){
       context.commit('add')
    }
  }

注意：在vue组件怎么使用 Action 通过 store.dispatch 方法触发

4.getters(它是一个类似vue组件computed的计算属性)

  getters: {
     doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
  }
  组件：
  computed：{
      A(){
           return this.$store.getters.doneTodosCount
      }
  }

注意：在vue组件怎么使用 Getters 通过组件中的计算属性来返回this.$store.getters.方法名

5.modules(它是一个模块化的函数)

(1) 首先在store文件夹里创建自定义名的js里面导出一个对象里面是vuex的

五个函数

(2) 再在store文件夹里的index.js引入 import Mode from '写的是创建自定义名的js’然后在modules里写上Mode

  modules: {
     Mode
  }
  }
  组件：
    this.$store.state.Mode.变量名

注意：在vue组件怎么使用 Modules 在组件中使用this.$store.state.Mode.变量名

namespaced 命名空间

• namespaced： true 命名空间开启

namespaced: true
组件：
首先引入import { mapMutations} from 'vuex';
在methods里面...mapMutations('模块名字',{'自定义名字':'模块里的方法'}),
然后再通过事件来触发this.自定义名字(传递的参数)

辅助函数

1、mapState 是快速获取state里的数据

在组件里：
<div>{{变量1}}</div>
computed：{
    ...mapState(['变量1','变量2'])
}

2、mapMutations 是快速获取mutations里的数据和modules模块名里的mutations

在组件里：

methods: {
    ...mapMutations('模块名',{'自定义名':'模块名里的mutations的方法'}),
    add(){
      this.自定义名(传递的参)
     
    }

3、mapGetters 是快速获取Getters里面的方法

在组件里：

  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }

4、mapActions 辅助函数将组件的 methods 映射为 this.$store.dispatch 调用（需要先在根节点注入 store）

在组件里：

  methods: {
    ...mapActions([
      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      // `mapActions` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }