<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> x</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.22/dist/vue.js"></script>
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<!--
<script src="C:\Users\SDSC-XAD\node_modules\vuex\dist\vuex.js" />
<script src="https://unpkg.com/vuex@2.3.0" ></script>
-->
<script src="https://unpkg.com/vuex@2.3.0" ></script>
</head>
<body>
<h1>vuex</h1>
<h2> vuex example</h2>
<hr>
<div id="example-2">
<div>
<h4>
辅助函数 mapState、mapGetters、mapMutations、mapActions
可以在组件中做对象映射
</h4>
<h2>
Modules namespace用法
</h2>
</div>
<counter></counter>
</div>
<script type="text/javascript">
const moduleB = {
namespaced:true,
namespace:'b',
state: {
name:'moduleB',
count:0
},
actions:{
addAction:function(state,b){
//可以直接修改
//this.myStore.state.count3++
// async / await 同步和异步
//或者提交给mutations
this.myStore.commit('b/increment', 10)
}
}
,
mutations:{
increment:function(state,a){
state.count++
},
},
}
const moduleA = {
namespaced:true,
namespace:'a',
state:{
voteitems:[{text:'A',value:0},{text:'B',value:0},{text:'C',value:0},{text:'D',value:0}],
count:0,
count2:1,
count3:2,
str01:"str01",
name:'moduleA',
},
mutations:{
deIncrement:function(state,a){
state.count--
},
increment:function(state,a){
state.count++
},
changeadjust:function(state,option){
},
},
getters:{
str01: state => {
return state.str01
},
str02: state => {
return state.str01
}
},
actions:{
addAction:function(state,a){
//可以直接修改
//this.myStore.state.count3++
// async / await 同步和异步
//或者提交给mutations
this.myStore.commit('a/increment', 10)
}
}
}
var myStore = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
Vue.component('counter', {
template: `<div>
<fieldset>
<legend>module A</legend>
{{countPlusLocalState}}--->countPlusLocalState ||{{anotherState}}--->anotherState || {{$store.state.a.count}} --->count ||{{ $store.state.a.count3 }} --->count3 ||{{$store.state.a.str01}}--->str01 ||{{str02}} --->str02 ||
<p>{{$store.state.a.name}}</p>
<p>{{$store.state.b.name}}</p>
<button @click="addHandle">add</button>
<button @click="deHandle">de</button>
</fieldset>
<fieldset>
<legend>module B</legend>
<p>|| {{$store.state.b.count}} --->moduleB count </p>
<button @click="addHandlemoduleB">add moduleB</button>
</fieldset>
</div>`,
data: function(){
return {localCount:20}
},
// computed 1
/*
computed: {
count () {
return this.$store.state.count
}
}
*/
// computed 2
//computed: mapState 改为 computed: Vuex.mapState ,这样就不会报错了
// computed: Vuex.mapState({
// count:'count2'
//})
// computed 3
/*
computed:Vuex.mapState({
// count:state=>state.count2, //理解为传入state对象,修改state.count属性
// count: state => state.count2,
count: 'count3',
countPlusLocalState (state) {
return state.count + this.localCount
}
})
*/
computed 4
computed:{
// … 三个点,在框架语言里,就是传对象
//此处要有namespace ,不然找不到state中的常量
...Vuex.mapState('a',{
// count:state=>state.count2, //理解为传入state对象,修改state.count属性
// count: state => state.count2,
count: 'count3',
countPlusLocalState (state) {
return state.count + this.localCount
}
}),
//此处要有namespace ,不然找不到state中的常量
// 使用对象展开运算符将 getter 混入 computed 对象中,同时也可以起别名,
...Vuex.mapGetters([
'str01',
'str02',
// str03:'str01',
]),
// 可以使用外部方法 此处有没有namespace 无所谓
...Vuex.mapState('b',{
anotherState (state) {
return outsidefunction()
}
})
},
methods: {
//此处要有namespace ,不然不知道方法在哪个模块
// 分发给store中的方法或者action
...Vuex.mapActions('a',{
addHandle: 'addAction'
}),
// 辅助函数不能直接传值,可以在方法体内传值
...Vuex.mapMutations('a',{
deHandle: 'deIncrement'
}),
//addHandlemoduleB
...Vuex.mapActions('b',{
addHandlemoduleB: 'addAction'
}),
}
})
function outsidefunction(){
return 100;
}
function localincr(){
this.myStore.state.count3++
}
new Vue({
el: '#example-2',
data: {
},
store:myStore,
computed:{
}
})
</script>
</body>
</html>